CSS 水平居中

浏览数：45 / 时间：2015年06月09日

水平居中：行内元素解决方案

居中元素：文字、链接以及其它行内元素（inline或inline-*类型的元素，如inline-block，inline-table，inline-flex）
解决方案：将inline元素包裹在一个display属性为block的父级元素中，如div、nav，设置父级元素属性text-align:center属性即可。

HTML

CSS

nav, div{
text-align: center;
}

水平居中：块状元素解决方案
居中元素：块状元素，如div，p，section等元素，即display属性为block的元素
解决方案：添加margin-left，margin-right属性值为auto即可，如：margin:0 auto;
注意：需要居中的块状元素需有固定的宽度，否则无法实现居中，因为占据100%的宽度。

HTML

<div class="center">水平居中的块状元素</div>
<p class="center">水平居中的块状元素</p>

CSS

div, p{
    width: 200px;  /*需要设置元素的宽度值*/
    height: 150px;
color:#fff;
background: #222;
}
.center {
    margin: 10px auto;
}

水平居中：多个块状元素的解决方案
居中元素：“多个块状元素”水平横向排列居中
解决方案：设置这几个块状元素的display属性为inline-block，并且设置父元素的text-align属性为center即可。
注意：如果要实现这几个块状元素的垂直居中，使用上一节中的margin:0 auto属性即可。

HTML

<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>

CSS

body {
    text-align: center;
}
/*页面美化元素*/
div {
    width: 100px;
    padding: 10px;
    height: 50px;
    background-color: #222;
    color: #fff;
}
.center {
    display: inline-block;
}

水平居中：多个块状元素解决方案（使用flex布局实现）
居中元素：多个块状元素水平横向排列居中（使用flex布局实现）
解决方案：将多个块状元素的父级元素的display属性设置为flex，并设置justify-content:center即可。
HTML

<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>

CSS

body {
    display: flex;
    justify-content: center;
}

/*页面美化元素*/
div{
    width: 100px;
    height: 50px;
    color:#fff;
    background: #222;
    margin: 10px;
    padding: 10px;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS 水平居中