CSS水平居中_html/css_WEB-ITnose

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

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

HTML

< div >文字元素

< nav >
< a href ="" >链接元素01
< a href ="" >链接元素02
< a href ="" >链接元素03

CSS

nav, div{
text-align: center;
}

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

HTML

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

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 class ="center" >水平居中的块状元素

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 class ="center" >水平居中的块状元素

CSS

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

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