整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。
1、text-align 方式
text-align 是入门最常用的属性，根据字面意思是文本对齐用的。
只需在父级标签上设置即可，虽然内部的子元素不管是块级元素 or 非块级元素都可以使用，但需注意块级元素会占用整行的宽度，文本是在这个宽度中作水平居中。
代码举例
页面效果
2、定宽 margin auto 方式
这也是常见的水平居中方式，通过设置子元素的 margin 属性来控制距离父元素的距离。需要注意：子元素如果是块级元素，就最好设置宽度，不然就会占满于父元素，在通过 text-align 文本居中对齐就没有意义了。对于非块级元素必须要设置宽度。
代码举例
页面效果
3、flex 方式
通过设置浮动布局来实现居中，这是相对上两种方法某种程度上最简单的实现，因为在其基础上可以做更多布局的扩展，不用担心破坏布局。
如果你不了解 flex 布局，可以看下这个链接：
https://eminoda.github.io/2018/08/20/css-flex/
设置 justify-content 轻松搞定定位：
代码举例
页面效果
4、position + 浮动 方式
现在这两种是比较有趣的定位方式，实际场景不建议使用，我是不愿意别人这样写，脑袋还要转个弯，来理解这样布局的计算方式。
如果元素是块级元素，通过 float 浮动属性，将它的宽度“抹去”。然后通过对于上级元素的相对定位通过错位修正的方式来居中。
让父元素的左侧从中间开始定位，子元素再根据自己的实际宽度往左偏移一半达到水平居中的目的。
代码举例
页面效果
5、position + transform 方式
思路同上，不同的是这次设置子元素为绝对定位，并距离左侧偏离一半，最后通过 transform 根据元素的实际宽度往左再偏移一半，达到居中效果。
代码举例
页面效果
上面只列举了 5 种水平居中的实现方法，相信还要更多的方式。不过不管哪种方法，能在业务代码实践中最快速、最准确的运用才是最佳实践。
希望在读的各位能有所收获。
一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。
关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。
点击 ↙ 了解更多，了解更多前端开发技术文章。！
. 元素高度声明的情况下在父容器中居中：绝对居中法
<div class="parent">
<div class="absolute-center"></div>
</div>
.parent {
position: relative;
}
.absolute-center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 70%;
width: 70%;
}
优点：
1.跨浏览器，包括 IE8-10
2.无需其他冗余标记，CSS 代码量少
3.完美支持图片居中
4.宽度高度可变，可用百分比
缺点：
1.必须声明高度2. 负外边距：当元素宽度高度为固定值时。设置 margin-top/margin-left 为宽度高度一 半的相反数，top:50%;left:50%
<div class="parent">
<div class="negative-margin-center"></div>
</div>
.parent {
position: relative;
}
.negative-margin-center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
height: 300px;
width: 300px;
}
优点：
良好的跨浏览器特性，兼容 IE6-7
代码量少
缺点：
不能自适应，不支持百分比尺寸和 min-/max-属性设置
内容可能溢出容器
边距大小域与 padding，box-sizing 有关3. CSS3 Transform 居中：
<div class="parent">
<div class="transform-center"></div>
</div>
.parent {
position: relative;
}
.transform-center {
position: absolute;
left: 50%;
top: 50%;
margin: auto;
width: 50%;
-webkit-transform: translate(-50%， -50%);
-moz-transform: translate(-50%， -50%);
transform: translate(-50%, -50%);
}
优点：
内容高度可变
代码量少
缺点：
IE8 不支持
属性需要浏览器厂商前缀
可能干扰其他 transform 效果4. table-cell 居中：
们在使用css来布局时经常需要进行居中，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，利用css来实现对象的垂直居中有许多不同的方法，比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中……下面就css居中的一些常用方法做个集中的介绍。
首先是水平居中，最简单的办法当然就是：
margin:0 auto;
利用line-height设为height的一样即可：
eg:
.div {
width：200px；
height: 200px;
line-height: 200px;/*实现垂直居中的关键*/
text-align:center;
font-size: 36px;
background-color: #ccc;
}
父容器元素：position: relative，子元素：position:absolute;
eg:
<div class="box">
<div class="content"></div>
</div>
<style>
.box{position:relative;width:200px;height:200px;background:#999;}
.content{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:#C9F;}
</style>
效果如下所示：
！注意：高度必须定义，建议加 overflow: auto，防止内容溢出。
介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。
eg：
<div class="parent">
<div class="children">我是通过flex的水平垂直居中噢！</div>
</div>
<style>
.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:200px;
height:200px;
background-color:green;
}
.children {
background-color:blue;
color:#FFF;
}
</style>
效果如下所示：
这种方式最为简便，就是兼容性不好，不过随着时间的前进，各大浏览器一定会都兼容的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
