css布局：块级元素的居中

一.定宽：

1.定位居中(absolute)

方法一：

html:
<div class="main"></main>

css:
.main{
width:400px;
height:200px;
background:#eee;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
}

方法二：

html:
<div class="main"></div>
css:
body {
height: 100%;
}
.main{
width: 400px;
height: 200px;
background:#eee;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

二.非定宽：

1.定位居中(absolute translate)

html:
<div class="main">
hello world
</div>
css:
.main{
background:#eee;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}

2.flex布局

html:
<body>
<div class="main">
</div>
</body>
css:
html,body{
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
}
.container{
width: 400px;
height: 200px;
background: #ccc;
}

3.table

html:
<body>
<div class="container">
<div class="main">
<div class="inner"></div>
</div>
</div>
</body>
css:
html,body{
height: 100%;
}
.container{
width:100%;
height:100%;
display: table;
}
.main {
display: table-cell;
vertical-align: middle;
}
.inner{
width: 400px;
height: 200px;
background: #ccc;
margin:0 auto;
}

更多专业前端知识，请上【猿2048】www.mk2048.com

css布局：块级元素的居中相关推荐

css变成块级元素_css块级元素垂直居中常用布局方式
在项目中经常会用到垂直居中布局,本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用,flex的使用进行梳理.让大家能够理解之后进行举一反三. 以下例子如果未特别说明 ...
CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
css变成块级元素_css块级元素
<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进 ...
css变成块级元素_【CSS】块级元素
完整的框模型(Box Model) 不同的宽度.高度.内边距和外边距相结合,就可以确定文档的布局. 大多数情况下,文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定. 1.元素框的最内部 ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
css变成块级元素_设置标签的css样式代码为“display：block”，标签将变为块级元素。（）...
设置标签的css样式代码为"display:block",标签将变为块级元素.( ) 答:对青藏高原常见垫状植物有( ? ? ). 答:垫状点地梅甘肃蚤缀.垫状棘豆垫状驼绒藜 ...
CSS样式----块级元素和行内元素
块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素:s ...
CSS中块级元素、行内元素、行内块元素区别
1.块级元素 block 块级元素,顾名思义,该元素呈现"块"状,所以它有自己的宽度和高度,也就是可自定义width和height.除此之外,它独占一行(float除外),一般可以 ...

css布局：块级元素的居中

一.定宽：

1.定位居中(absolute)

二.非定宽：

1.定位居中(absolute translate)

2.flex布局

3.table

css布局：块级元素的居中相关推荐

最新文章

热门文章