DIV垂直居中对齐

简介: 效果图: CSS: #container{ display:table-cell; width:300px; height:300px; vertical-align:middle; bo...

效果图:

CSS:

 #container{
        display:table-cell; 
        width:300px; 
        height:300px; 
        vertical-align:middle; 
        border:1px solid #ccc; 
        border-radius:20px;
        text-align:center; 
}
#cell{
        margin: 0 auto; 
        width:100px; 
        height:100px; 
        border:1px solid red; 
        border-radius:10px;
 }

HTML:

 

 <div id="container">
        <div id="cell"></div>
 </div>

 

目录
相关文章
|
3月前
div盒子垂直居中的3种方法
div盒子垂直居中的3种方法
30 2
|
12月前
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
113 0
让里面的DIV上下左右居中在外面的DIV里
让里面的DIV上下左右居中在外面的DIV里
45 0
|
前端开发
span内文字居中css布局方法_让span内容居中
display:block,让span形成块(独占一行),就像DIV一样,在设置内容居中css text-align:center。
2079 0
|
前端开发
div 居中方法汇总
居中问题无论在工作还是在面试中, 都是很常见的 下面我来给大家总结几种常用的方法, 大家可根据实际情况选择 好了, 废话不多说, 先看下效果 法1 定位+偏移 (margin) html css .
1019 0
|
容器 前端开发
内联元素垂直居中方法汇总
1. 让 line-height 与 height 相等 .container { width: 1rem; height: 1rem; line-height: 1rem; font-size: 0.
1625 0
div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用。 一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。
1806 0