笔记:CSS 垂直/水平居中 - 甲烃气瓶
menu
hjthjthjt
hjthjthjt

笔记:CSS 垂直/水平居中

每次写起来都得去找不如一次性自己记下来2333333

垂直居中

来自:知乎:Jaskey Lam (用 CSS 实现元素垂直居中,有哪些好的方案?)

在不知道子容器高度父容器高度的情况下, 利用绝对定位:

parentElement{/*父容器*/
    position:relative;
}

childElement{/*子容器*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

父容器只有一个元素,且父容器设置了高度,则使用相对定位:

parentElement{/*父容器*/
    height:xxx;
}

childElement {/*子容器*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

不考虑兼容老式浏览器(前端浏览器天下第一),用Flex布局:

parentElement{/*父容器*/
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

水平居中

水平这个我瞎写的,因为当时的方案我都没用233333

单纯在子容器中加入:

childElement {
    margin: 0 auto;
}

但是这种什么鸡儿情况都有,对我这辣鸡写法来说经常无效,每次还是改来改去(

本文采用 CC BY-NC-SA 3.0 协议进行许可,在您遵循此协议的情况下,可以自由共享与演绎本文章。

本文链接:https://jakting.com/archives/notes-css-vertical-horizontal-center.html


共有 0 条评论

发表评论

昵称不能为空
邮箱不能为空