未知高度元素水平居中的办法

一般未知高度元素水平居中的方法常见的有三个方法

(1)不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:

parentElement{

position:relative;

}

childElement{

position: absolute;

top: 50%;

left:50%;

transform: translateY(-50%);

}

(2)若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可

parentElement{

height:xxx;

}

.childElement {

position: relative;

top: 50%;

left:50%;

transform: translateY(-50%);

}

(3)Flex 布局:

不考虑兼容老式浏览器的话,用Flex布局简单直观一劳永逸:

parentElement{

display: flex;

justify-content: center;

align-items: center;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,253评论 0 8
  • 一、水平居中 1.行内元素水平居中 text-align: center可以实现在块级元素内部的行内元素水平居...
    Cheng丶阅读 3,237评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,546评论 0 6
  • 遇你是我注定的灾难 途经嫣红牵引的指南 玫瑰无心伤了河畔 噢,就在你的花园 连星河也碎了 漫天星辰爱你至黄昏的时间...
    治百病的草阅读 780评论 0 2
  • 站在山顶与过去诚恳 她是耳边吹着的风声 化为河里一夜的微芒 她是心里明着的月光 她是风儿是月儿 也只有我能听到能看...
    西城的北阅读 1,755评论 0 3