一.HTML代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
二.为了使div水平垂直居中
1.该方法简单,但是对低版本的IE浏览器有兼容性问题,也是普通web页面模态框常用的方法,css代码如下
.parent{
500px;
height: 400px;
position: relative;
}
.child{
100px;
height: 100px;
position: absolute;
top:0;left:0;bottom: 0;right: 0;
margin: auto;
}
2.该方法的核心思想就是将外层DIV模拟为表格的一个单元格,这样就可以使用属性vertical-align:middle使设置内部div垂直居中,使用text-align:center水平居中,当然也要设置内部div为行内块使其有行内元素的特性
.parent {
800px;
height:500px;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
200px;
height:200px;
display:inline-block;
background-color:red;
}
3.主要使用的弹性布局,但是也存在浏览器的兼容性问题
.parent {
800px;
height:500px;
display:flex;
justify-content:center;
align-items:center;
}
.child {
200px;
height:200px;
background-color:red;
}
4.其实和第一种方法差不多,只不过不够[智能]
.parent{
500px;
height: 400px;
position: relative;
}
.child{
100px;
height: 100px;
top:50%;left:50%;
margin: auto;
margin-left:-50px;
margin-top:-50px;
}
....
前端中的一些常用到的居中整理如下:
水平居中设置
1、行内元素
设置 text-align:center
2、固定宽度的块级元素
设置 左右 margin 值为 auto,常见的水平居中为 margin:0 auto;
3、不固定宽度的块级元素
1):在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
2):给该元素设置 displa:inine 方法
3):父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
1、行内元素
设置 text-align:center
2、固定宽度的块级元素
设置 左右 margin 值为 auto,常见的水平居中为 margin:0 auto;
3、不固定宽度的块级元素
1):在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
2):给该元素设置 displa:inine 方法
3):父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle