绝对定位元素设置水平居中

wujl596 发布于2019-08-01 16:25 / 3122人阅读

摘要：需求有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用不方便，就决定使用绝对定位来设置。方法三实现绝对定位元素的居中有了这个就自动居中了

需求：有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用margin-top不方便，就决定使用绝对定位来设置。

实现方法：
方法一、知道容器尺寸的前提下

.element {
    width: 600px; height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

缺点：该种方法需要提前知道容器的尺寸，否则margin负值无法进行精确调整，此时需要借助JS动态获取。

方法二、容器尺寸未知的前提下，使用CSS3的transform属性代替margin，transform中的translate偏移的百分比值是相对于自身大小的，设置示例如下：

.element {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    -webkit-transform: translate(-50%, -50%);
}

缺点：兼容性不好，IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）。

方法三、margin: auto实现绝对定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute;
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;  /* 有了这个就自动居中了 */
}

云服务器 GPU云服务器水平居中绝对居中水平垂直居中水平居中布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50502.html

水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定

摘要：包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中，比较特殊。 2018.05.29 居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素、绝对定位的居中。为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。目录：第一...

waterc 2019-08-29 15:32 评论0 收藏0
主流的CSS水平和垂直居中技术大全

摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...

KoreyLee 2019-08-29 16:26 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Hydrogen 2019-08-29 16:56 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

hlcc 2019-08-02 11:43 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Meils 2019-08-23 12:20 评论0 收藏0
水平垂直居中小结

摘要：相等的上下值三水平垂直居中绝对定位和负外边距使用绝对定位实现水平垂直居中时，元素的和应该等于对应的和值的一半再取负值。相对定位或绝对定位均可绝对定位和布局能实现居中效果的方法还有很多，这里列出来的方法只是一小部分，日后会慢慢补充。我们在页面布局中经常会遇到需要将内容水平/垂直居中的情况，现在我们就来梳理一下实现的方法。一、水平居中 1.行元素设置其父元素的text-alig...

xuxueli 2019-08-29 16:35 评论0 收藏0