html元素水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法

2024-07-11 08:31:14

字體：大中小

供稿：網(wǎng)友

html元素水平居中于其父級(jí)元素的方法：

方法1：

復(fù)制代碼

代碼如下:
<div class="wrap">
<div class="left-right-middle1">左右居中方法1</div>
</div>

復(fù)制代碼

代碼如下:
html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle1{
width:200px;
background-color:#69F;
margin:0 auto;
}

方法2：

復(fù)制代碼

代碼如下:
<div class="wrap">
<div class="left-right-middle2">左右居中方法2</div>
</div>

復(fù)制代碼

代碼如下:
html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.left-right-middle2{
width:200px;
background-color:#69F;
left:50%;
margin-left:-100px;
}

html元素垂直居中于其父級(jí)元素的方法：

復(fù)制代碼

代碼如下:
<div class="wrap">
<div class="top-bottom-middle">上下居中</div>
</div>

復(fù)制代碼

代碼如下:
html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.top-bottom-middle{
height:200px;
background-color:#69F;
top:50%;
margin-top:-100px;
}

html元素水平垂直居中于其父級(jí)元素的方法：

方法1：

復(fù)制代碼

代碼如下:
<div class="wrap">
<div class="all-middle1">上下左右居中方法1</div>
</div>

復(fù)制代碼

代碼如下:
html,body,div{
margin:0;
padding:0;
height:100%;
position:relative;
}
.wrap{
width:400px;
height:300px;
margin:10px;
border:1px solid #000;
}
.all-middle1{
width:200px;
height:200px;
background-color:#69F;
top:50%;
margin:-100px auto 0;
}

方法2：

復(fù)制代碼

代碼如下:
<div class="wrap">
<div class="all-middle2">上下左右居中方法2</div>
</div>

上一篇：bootstrap3.0教程之柵格系統(tǒng)原理(布局)

下一篇：css3 線性漸變和徑向漸變示例附圖