Div居中在屏幕正中间

html-css018

Div居中在屏幕正中间,第1张

一、用margin负值,这种方法适合div的宽高固定。 position:absolute left:50% top:50% margin-left:-宽度的一半 margin-top:-高度的一半; 二、使用css3新属性translate,这个不需要固定宽高。 position:absolute left:50% top:50% transform:translate(-50% -50%) 三、使用flex布局,这个也不需要固定宽高。但是需要在父容器上面设置 display:flex justify-content:center align-items:center 四:将上下左右全设为0. position:absolute top:0 bottom:0 left:0 right:0 margin:auto 这样全部设为0后会拉伸图片充满父容器,然后margin设为auto会自动填充上外边距,就能实现居中。

我们进行页面开发的时候,最经常用的就是div标签了,那么div中的内容如何居中显示呢,下面我给大家分享一下。

工具/材料

SublimeText

首先我们用sublime先创建一个html,并且在html里面加入div,如下图所示

然后我们在div中加入一些文字,如下图所示,文字用span包裹起来

运行页面程序以后我们会看到文字在div的左上角,并没有居中的效果,如下图所示

接下来我们就需要用CSS给div中的内容设置居中了,如下图所示,通过text-align和line-height实现

最后运行界面程序,我们看到div中的内容这次水平和垂直都居中了,如下图所示

因为“text-align:center”控制的是文本居中,div居中可以用外边距margin来实现。

1、新建html文件,在body标签中添加div标签,div标签中的内容为“演示文本”,添加题目中的css样式,为了方便演示,给div标签添加灰色背景,这时可以发现div靠近浏览器的左侧,文字在div中居中:

2、为div标签添加新的外边距“margin”属性,属性值为“0 auto”,“0”指的是上下外边距为0,“auto”指的是左右外边距为自适应:

3、这时无论浏览器的宽度是多少,div都会在浏览器上水平居中: