水平/垂直都居中的div

简介: 用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div强迫向上移动div高度一半,向左移动div宽度一半 html,body{padding:0;margin:0;} #container ...

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器

思路:
用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div强迫向上移动div高度一半,向左移动div宽度一半

<style>
html,body{padding:0;margin:0;}
#container {
 position:absolute;
 left:50%;
 width:400px;
 height:200px;
 margin-left:-200px;


 top:50%;
 margin-top:-100px;
 background:#ccc;
}
</style>

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

目录
相关文章
|
10月前
水平居中 #31
水平居中 #31
37 0
|
C#
C#中,让按钮文字垂直水平都居中
C#中,让按钮文字垂直水平都居中
107 0
|
前端开发
CSS水平居中+垂直居中+水平/垂直居中的方法总结
CSS水平居中+垂直居中+水平/垂直居中的方法总结
180 0
CSS水平居中+垂直居中+水平/垂直居中的方法总结
html+css实战111-行内元素的垂直外边距
html+css实战111-行内元素的垂直外边距
129 0
|
移动开发 安全 weex
基于 Flex 实现两端对齐垂直布局
一般来说布局我们都是水平布局,最多搞个垂直居中。而且对于一些 float 、 position 好像本身就不太适合垂直布局。 正好前段时间用 weex 做了一个页面,weex 天生基于 flex 。且 weex 中 flex-direction 默认值为 column,flex-direction 定义了 flex 容器中 flex 成员项的排列方向。 页面分为三部分(header,section,footer),有一些优化的点: 类似两端对齐,但是最好可以让 section 偏上一点 尽可能一屏显示,如果不够那么出滚动条。 那么我们来看看有什么方案可以实现。
471 0
基于 Flex 实现两端对齐垂直布局
|
前端开发 容器
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位,注意边距问题。
div水平布局两边对齐
|
前端开发
这一次,彻底搞懂垂直水平居中
这一次,彻底搞懂垂直水平居中
130 0
|
前端开发 容器
CSS布局之水平居中布局
水平居中布局指的是当前元素在父级元素容器中,水平方向是居中显示的。
463 0
img垂直水平居中与div
方法一: 效果 1.HTML代码 2.CSS代码 div{ width: 400px; height: 300px; margin: 0 auto; background-color: #66...
1011 0