html元素水平垂直居中父级,CSS_html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法，html元素 水平居中 于 其父级元 - phpStudy...

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

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

方法1：

复制代码代码如下:

左右居中方法1

复制代码代码如下:

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：

复制代码代码如下:

左右居中方法2

复制代码代码如下:

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

复制代码代码如下:

上下居中

复制代码代码如下:

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：

复制代码代码如下:

上下左右居中方法1

复制代码代码如下:

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：

复制代码代码如下:

上下左右居中方法2

复制代码代码如下:

html,body,div{

margin:0;

padding:0;

height:100%;

position:relative;

}

.wrap{

width:400px;

height:300px;

margin:10px;

border:1px solid #000;

}

.all-middle2{

width:200px;

height:200px;

background-color:#69F;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

}

完整代码：

复制代码代码如下:

Div Middle

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;

}

.left-right-middle2{

width:200px;

background-color:#69F;

left:50%;

margin-left:-100px;

}

.top-bottom-middle{

height:200px;

background-color:#69F;

top:50%;

margin-top:-100px;

}

.all-middle1{

width:200px;

height:200px;

background-color:#69F;

top:50%;

margin:-100px auto 0;

}

.all-middle2{

width:200px;

height:200px;

background-color:#69F;

top:50%;

left:50%;

margin:-100px 0 0 -100px;

}

左右居中方法1

左右居中方法2

上下居中

上下左右居中方法1

上下左右居中方法2

效果图：

相关阅读:

浅析iOS中视频播放的几种方案

浅谈css元素居中

mysql中event的用法详解

Android查看电池电量的方法(基于BroadcastReceiver)

ThinkPHP打开验证码页面显示乱码的解决方法

Laravel中使用自己编写类库的3种方法

thinkPHP实现将excel导入到数据库中的方法

jquery验证邮箱格式并显示提交按钮

在Ubuntu系统上部署分布式系统Ceph

php递归遍历多维数组的方法

JavaScript实现页面跳转的几种常用方式

浅谈javascript中replace()方法

asp.net实现获取客户端详细信息

JavaScript自定义数组排序方法