首页 > 代码库 > CSS 水平居中

CSS 水平居中

2024-07-26 18:11:51   224人阅读

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

<nav>
  <a href="">链接元素01</a>
  <a href="">链接元素02</a>
  <a href="">链接元素03</a>
</nav> 
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 水平居中


联系
我们