CSS3中DIV水平垂直居中-2(3)

简介: CSS3中DIV水平垂直居中-2(3)

用到CSS3中display的新属性。

HTML

<div class="parent">

</div>

CSS

复制代码
html,body{
    width: 100%;
    height: 100%;
}
/*方法二*/
body{
    display: flex;
    align-items: center;/****水平居中****/
    justify-content: center;/*垂直居中*/
}
.parent{
    width: 750px;
    height: 400px;
    background: orange;
    /*方法一*/
    /*margin: 0 auto;*/
    /*position: relative;*/
    /*top: 50%;*/
    /*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/
}
复制代码

还有一种关于table的方法不常用。这三种都长用到!

目录
相关文章
|
1月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
7月前
|
前端开发
CSS div隐藏滚动条
CSS div隐藏滚动条
41 0
N..
|
26天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
37 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
19 0
|
2月前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
26 1
|
3月前
|
前端开发 Java C++
面试官:用 CSS 实现一个元素的水平垂直居中,写出你能想到的所有答案
面试官:用 CSS 实现一个元素的水平垂直居中,写出你能想到的所有答案
|
4月前
|
前端开发
css 实现 div 宽高同比
css 实现 div 宽高同比
|
4月前
|
前端开发
CSS 垂直居中
CSS 垂直居中
|
4月前
|
前端开发
CSS div 水平排列
CSS div 水平排列