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()方法
实现获取客户端详细信息
JavaScript自定义数组排序方法
html元素水平垂直居中父级 CSS_html元素水平居中 垂直居中 水平垂直居中于其父级元素的方法 html元素 水平居中 于 其父级元 - phpStudy...
