如何让一个DIV水平,垂直方向都居中于浏览器?

<style type="text/css">
<!-- 
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>

其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。

时间: 2024-09-30 21:29:52

如何让一个DIV水平,垂直方向都居中于浏览器?的相关文章

水平和垂直方向都居中

水平和垂直方向都居中:我们可以在水平上用text-align:center;竖直方向上是vertical-align: middle;但是这个只能用在特定的元素上: 父元素:display:table;子元素:display: table-cell; 例子:父元素: display: table; width: 100%; margin-bottom: 13px; overflow: hidden !important; 子元素: display: table-cell; margin-bott

flex align-center:center多行垂直方向居中 align-items:center垂直方向单行居中

align-center:center多行垂直方向居中 align-items:center垂直方向单行居中 原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8665647.html

HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; } 但是到了移动端,如果写百分比布局的话,高度不好确定,所以弹窗居中就会变得困难,今天遇到这个问题,百度了一下,看到这位朋友的资料,(http://www.shejida

让一个div水平且垂直居中

水平且垂直居中分为三种情况: 1.一个浏览器页面中,只有一个div模块,让其上下左右居中: div{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: 0; } 2.一个父元素div,一个已知宽度.高度的子元素div(100*200): /*子div样式*/ { position: absolute/fixed; left: 50%; top: 50%; margin-left: -50px; margin-top: -

CSS div水平垂直居中和div置于底部

一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_center { position: absolute; top: 50%; left: 50%; margin-left: -180px; /*要居中的div的宽度的一半*/ margin-top: -120px; /*要居中的div的高度的一半*/ } 三.div置于底部(footer) .bot

实现图片在一个div中垂直左右都对齐

<div class="info_top_left"> <img src="images/img-product01.png" > </div> .info_top_left { height: 100px; width: 97px; line-height: 100px; border: 1px solid #CACACA; float: left; text-align: center; font-size: 0; } .in

css 元素水平垂直方向居中

一.text-align:center;vertical-align:middde: html部分 <div class="parent"> <div class="child"> </div> </div> css部分 .parent{ width: 400px; height:400px; background:#666666; text-align: center; font-size: 0px; } .chil

如何让一个div水平和垂直居中对齐

以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; height: 500px; border: 2px solid #000; position: relative; } .child { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bo

jquery计算出left和top,让一个div水平垂直居中的简单实例

if($("#cont1").css("position")!="fixed"){         $("#cont1").css("position","absolute");         var dw = $(window).width();         var ow = $("#cont1").outerWidth();         var dh =