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>

 

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