div 居中(div居中的方法有几种)

div居中

DIV居中之div水平居中让DIV布局居中篇
怎么让DIV居中呢？怎么让DIV盒子水平居中呢？本节DIVCSS5让我们完成DIV布局水平居中。
一、div居中完成介绍-TOP
在布局一张网页时，一般网页主体框架是居中于浏览器中的。完成最外层DIV水平居中与浏览器中需求一个条件和一个设置。
假如最外层DIV盒子的CSS命名为“#divcss5”,这个时分为了兼容各大浏览器完成最外层的这个盒子居中。
一条件：
这个时分对“body”设置css内容居中款式（text-align:center）
即CSS代码：
body{text-align:center}
一设置：
这个时分对“#divcss5”设置居中必备款式cssmargin
即CSS代码：
#divcss5{margin:0auto}
二、DIV居中用法实例-TOP
为了便于调查布局居中作用，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px款式。
1、最终得到DIV居中的CSS代码：
body{text-align:center}
#divcss5{margin:0auto;border:1pxsolid#000;width:300px;height:100px}
2、对应html代码片段：
<divid=”divcss5″>DIV水平居中事例div>
3、居中事例截图
完成div居中实例截图
DIV水平居中作用图
4、在线演示：查看事例
6、事例下载：
立即下载（0.853KB）
三、布局居中总结-TOP
布局居中我们需求对对象加margin:0auto款式，当然如果不加有的浏览器会完成居中作用，但有的浏览器就不会默认是居中。为了div居中兼容各大浏览器，一定遵循以上教程方法与施行教程。

div居中的方法有几种

/*1父级使用text-align:center属性使所有子文本内容水平居中*/
body{
text-align:center;
}
/*2利用margin属性,上外边距为0,左右自适应,需要指定宽度,这是最普遍的一种水平居中方式*/
div{
width:400px;
margin:0auto;
}
/*3flex弹性布局
body{
display:flex;
justify-content:center;
align-items:center;
}
/*4table属性
利用display:table的单元格属性使其子级垂直水平居中，写法如下：
div{
display:table;
}
.son{
display:table-cell;
vertical-align:middle;
}
.grandSon{
width:50%;
margin:0auto;
}