CSS div居中的几种方法

html-css062

CSS div居中的几种方法,第1张

CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框。

方法一:对div使用绝对布局position:absolute并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。

方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半。

其中 margin-left:-100px 和 margin-top:-100px 可以写成 margin:-100px  0px  0px  -100px

方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)。

以上3种方法的效果如下显示

若有两个div,里面小的div相对于外面大的div水平垂直居中对齐,有以下几种方法。

方法一:利用position和margin:auto实现。父元素设置position:relative;子元素设置position:absolute,并设置top,left,right,bottom值相等。

方法二:使用position。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%,并设置左移和上移为子元素的大小的一半。

方法三:使用display:flex。这种方法需要设置浏览器的兼容性。

方法四:使用transform:translate()。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%。最后设置transform:translate(-50%,-50%)。

以上四种方法的效果图如下显示

今天就跟大家分享这么多~如果你有更好的方法,请在下方留言

1、首先先打开我们的开发环境新建一个web项目。

2、在html中引入css文件这里是html页面的代码div和ul。

3、将所有标签的margin和padding初始为0然后将父级div的display设置为flexalign-items设置为center。

4、运行web项目后得到的结果如图所示垂直居中了。

5、 将display设置为table-cell,将vertical-align设置为middle即可。

6、将ul的高度设置为百分比然后使用相对定位设置top为二分之一的百分之百减去ul的高度即可。

7、使用line-height将其设置div的高度必须是确定值,然后将li左或者右浮动即可。

css让div里的表格居中对齐的方法有很多,可以改变改变表格的样式属性,也可以通过改变div的样式属性,这里介绍通过改变表格的样式属性使表格居中,这样不会改变div里除表格的其他元素的样式属性和位置。以下演示具体步骤:

1、打开HTML文件编辑器,新建一个HTML文件并添加HTML的基本元素标签。

2、添加好基本元素标签后在body里添加div元素,然后在div元素里面添加一个表格元素。

3、接下来配置div元素样式和表格元素样式,使得效果可以明显体现出来,这里使用的是行内式,也可以使用行外式和外部式。其中核心代码都是:margin:auto。

4、保存好后运行这个HTML文件。效果如图: