css中设置div居中显示的方法

html-css014

css中设置div居中显示的方法,第1张

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

工具/材料

SublimeText

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

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

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

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

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

一、用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会自动填充上外边距，就能实现居中。