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

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;
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注