元素的水平居中,垂直居中以及同時水平,垂直居中方法
阿新 • • 發佈:2019-02-19
一.元素的水平居中:
1,文字的水平居中:text-align:cente
<span style="color:#000000;">div.txtCenter{
text-align:center;
border:1px solid red;
margin:20px;
}
</span>
<span style="color:#000000;"><div class="txtCenter">我是文字,哈哈,我想要在父容器中水平居中顯示。</div></span> 結果: <img src="https://img-blog.csdn.net/20160321144458996?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /> 2,<span style="color:#FF0000;"><strong>已知寬度</strong></span>的塊元素居中: div{ width:500px; margin:20px auto ; text-align:center; } <div>我是定寬塊狀元素,哈哈,我要水平居中顯示。</div>
結果:
例子中的text-align:center控制了該div 的文字也居中;
3,未知寬度的塊元素水平居中方式:
(1).設定display:table,margin:0 auto
.wrap{
display:table;
margin:0 auto;
background:#ccc;電風扇
}
<div class="wrap">
設定我所在的div容器水平居中
</div>
結果:
(2).設定display:inline,text-align:center
結果:.container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin-right:8px;display:inline;} div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>
(3).通過給父元素設定 float,然後給父元素設定 position:relative 和 left:50%,子元素設定 position:relative 和 left:-50% 來實現水平居中。
.container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>
結果:
</pre><h1>二.元素的垂直居中:</h1><p>1,<span style="color:#B22222;"><strong>父元素高度確定的單行文字:<span style="color:#000000;">設定來height=line-height:即可</span></strong></span></p><p><span style="color:#B22222;"><strong><span style="color:#000000;"></span></strong><span style="color:#000000;"></span></span></p><pre name="code" class="html"><span style="color:#B22222;"><span style="color:#000000;">.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
<div class="wrap">
<h2>hi,imooc!</h2></span></span>
結果:
2,垂直居中,父元素高度確定的多行文字 :display:table-cell ,vertical-align:middle
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
結果
3.塊元素既垂直居中,又水平居中:父元素設定:position:absolute,left:50%,top:50%,子元素設定position:relative,left:-(子元素寬度的一半),top:-(子元素寬度的一半);
html, body
{
width:100%;
height:100%;
}
#one
{
position: absolute;
top:50%;
left:50%;
height:auto;
width:auto;
}
.pa
{
height:400px;
width:200px;
left:-200px;
top:-200px;
border:1px solid black;
background-color:greenyellow ;
}
<div class="pr" id="one">
<div class="pa pa1">#one的子元素pa1,相對#one絕對定位,#one是它的父元素,與.pa2為同級兄弟元素</div>
</div>