html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法

2024-07-11 08:31:14

字体：大中小

来源：转载

供稿：网友

html元素水平居中于其父级元素的方法：

方法1：

复制代码

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

复制代码

代码如下:
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：

复制代码

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

复制代码

代码如下:
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元素垂直居中于其父级元素的方法：

复制代码

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

复制代码

代码如下:
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元素水平垂直居中于其父级元素的方法：

方法1：

复制代码

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

复制代码

代码如下:
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：

复制代码

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

上一篇：bootstrap3.0教程之栅格系统原理(布局)

下一篇：css3 线性渐变和径向渐变示例附图