当前位置：网站首页 > 技术文章 > 正文

CSS 水平居中方式二

zhezhongyun 2025-05-25 16:44 2 浏览

<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

通过以下CSS样式代码实现水平方向居中布局效果

.child{display:table;margin:0 auto;}

优点:

只需要对子集元素

进行设置就可以实现水平方向居中布局效果

缺点:

如果子集元素脱离文档流, 导致margin属性的值无效

脱离文档流: float, 绝对定位, 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中布局的第一种解决方案</title>
<style>
#parent {
width: 100%;
height: 200px;
background: #ccc;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
/* display的值为table和block */
display: table;
/*
margin属性:外边距
* 一个值 - 上右下左
* 二个值 - 第一个表示上下，第二个表示左右
* auto - 表示根据浏览器自动分配
* 三个值 - 第一个表示上，第二个表示左右，第三个表示下
* 四个值 - 上右下左
*/
margin: 0 auto;
/*
绝对定位, 脱离文档流, margin 失效
position: absolute;
*/
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>
</body>
</html>

CSS Margin(外边距)

上一篇：面试发愁!吃透 20 道 CSS 核心题，大厂 Offer 轻松拿
下一篇：实现水平垂直居中的多种方法

相关推荐

带你看好玩的CSS-霓虹灯按钮: 对于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁...

自动生成的静态代码示例: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...

如何用代码快速制作营销网站底部广告?: 当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。以途牛为例，下边我们一起来说一下整个制作流程显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通...

CSS中清除浮动的几种方法，快来学习一下吧: 前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为：html代码css部分代码为：css代码通过上面的图片可以看出，当内部的div设置float后，外部的元素的...

css reset 标签属性默认值: 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见，但有时候我们已经为了reset而reset，我们经常看到这样的reset代码其实大部分CSSreset是没必要...

CSS实现溢出显示省略号: 小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~1.单行文本超出显示省略号效果图：实现代码:HTML部分&l...

CSS 基础大揭秘:打造酷炫网页的魔法钥匙: 在当今这个数字化时代，网页已经成为我们生活中不可或缺的一部分。无论是购物、学习还是娱乐，我们每天都会与各种各样的网页打交道。而你是否曾好奇，那些设计精美的网页是如何实现的呢？今天，我们就来揭开网页设计...

治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日: 晨光透过窗户洒在键盘上，又是充满希望的一天。前端的小伙伴们，在忙碌的工作和面试压力下，不妨趁着清晨和上午这段宁静时光，静下心来，和我一起解锁CSS的奇妙世界。今天咱们就用两道高频面试题，开启元气满...

浅谈position中absolute和relative: CSSposition属性中absolute和relative很容易让人弄混，基本的概念什么着，你去参考W3C，就不啰嗦了--------------------------------------...

Highcharts基础教程(二):图表配置: 一、图表容器Highcharts实例化中绑定容器的方式有两种：1.通过dom调用highcharts函数的方式$("#container").highcharts({//...

CSS之垂直导航条: 今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：1.首先我们创建一个有效的列表<li><ahref="http://www.？？？.com">...

Inkscape 1.4 新功能介绍: 各位Inkscape爱好者们，备受期待的Inkscape1.4版本已经正式发布，现在就可以从Inkscape官网下载体验了！这次更新带来了许多强大的新功能和改进，旨在提升你的矢量图形编辑...

前端内功修炼:5大主流布局系统进阶: 获课：keyouit.xyz/14642/前端布局进阶：从盒模型到弹性布局，深入解析5大主流布局系统核心原理前端布局是构建用户界面的基石，理解不同布局系统的底层逻辑和适用场景对于开发高效、可维护的...

MVP最小可用产品实践:用Pywebio库写一个接口加解密的小工具: 背景最近在接口测试的过程中，由于请求报文需要先进行加密再发起请求，响应报文也需要先解密才能提取指定字段的返回值传递给下一个接口，每次都要通过代码运行相应的加/解密方法进行解析，操作起来特别麻烦，所以我...

网易的互动版涂小瓶子爆火，究竟是如何做到的?: https://mp.weixin.qq.com/s/5vmXPBWcJZ_oZ4p1znNNLw附上爆火图文链接，复制打开即可查看其实最开始看见的时候没想到这个小小的瓶子会这么火，现在的SVG交互图...

一周热门

最近发表

首页
收录
顶部