position:absolute的容器居中

Ku_Andrew 发布于2019-08-29 11:03 / 1350人阅读

摘要：页面开发中，最经常是使用的当然要属于容器居中啦，居中有时候是一个很简单的问题，但是有时候也让人苦恼的牙痒痒代码如下代码不占据文档流，水平居中如下代码占据文档流，水平居中如下那如果想要水平垂直居中的话，就要像下面这么写啦代码和代码

web页面开发中，最经常是使用的当然要属于容器居中啦，“居中”有时候是一个很简单的问题，但是！有时候也让人苦恼的“牙痒痒”！
HTML代码如下：


    child container

CSS代码（不占据文档流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

CSS代码（占据文档流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

那如果想要水平垂直居中的话，就要像下面这么写啦~
HTML代码和CSS代码如下：

#content{
    position:absolute;
    width:650px;
    height:298px;
    left:50%;
    top:50%;
    margin-left:-325px;  /*设置为宽度的一半*/
    margin-top:-149px;   /*设置为高度的一半*/
    background-color: pink;
}

HELLO, WORLD!

但是，上面有一个需要注意的地方，就是如果#content有父容器，那么其父容器的position不能设置成relative，否则垂直居中会失效————我学的还不够扎实，具体为什么会失效，我一下也将不出来，若以后长知识了，我再不上去，或者‘米娜桑’有知道的，也可以贴出来~~

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

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

CSS元素（文本、图片）水平垂直居中方法

摘要：上下左右负伪元素父容器上设置用于设置为行内元素的水平居中居中元素自身设置用于设置为块级元素的水平居中元素宽度固定，且不能浮动绝对定位 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

wuyangnju 2019-04-23 13:08 评论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
垂直水平居中方法小结

摘要：前言最近看到很多面试题目会问请说出几种使用完成垂直水平居中的方法正好看基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结。具体代码如下使用完成垂直水平居中该方法的核心思想是使用表格来实现垂直居中，再使用来实现水平居中。前言：最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小...

amuqiao 2019-08-29 17:00 评论0 收藏0