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>

 

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