div设置居中 | 怎么设置div居中

怎么设置div居中

实现这个的方法很多种，你可以将一个`div`放在`</body>`放在之前，弹出的内容放在这个div中。后面要做的是如何让这个div容器水平垂直居中，至于做到这一点，建议点击：

水平垂直居中

或

垂直居中 | 博客自由标签

我想您能找到答案。

如何设置div居中

1. 实现DIV水平居中

设置DIV的宽高，使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。

2. 实现DIV水平、垂直居中

要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

3. 文本在DIV中水平、垂直居中（text-align + line-height）

设置div居中对齐

一、水平居中（text-align：center;）

这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。

二、使用margin:0 auto;水平居中

前提：给元素设定了宽度和具有display：block；的块级元素。

让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 auto，css自动算出左右边距，使得DIV居中。

三、定位实现居中(需计算偏移值)

原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。缺点：高度宽度需事先知道。

</div>

.absolute_p1 {

position: relative;

width: 200px;

height: 200px;}

.absolute_p1 .absolute_c1 {

width: 100px;

height: 100px;

position: absolute; /* fixed 同理 */

left: 50%; top: 50%;

margin-left: -50px;

margin-top: -50px; /* 需根据宽高计算偏移量 */}

该方法普遍使用，但是前提必须知道元素的宽度和高度。如果当页面的宽高是动态的，比方说页面需要弹出一个DIV层必须要居中显示，DIV的内容是动态的，所以宽高也是动态的，这是可以用jquery解决居中。

设置div居中的代码

很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，js，css都可以实现。这里主要介绍一下采用css的方法，有什么问题还请各位看官指出。

方法一：用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。html如下：

XML/HTML Code复制内容到剪贴板

<h1>haorooms案例题目</h1>

<p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>

</div>

css如下：

CSS Code复制内容到剪贴板/* This parent can be any width and height */

.block {

text-align: center;

} /* The ghost, nudged to maintain perfect centering */

.block:before {

content: "";

display: inline-block;

height: 100%;

vertical-align: middle;

margin-right: -0.25em; /* Adjusts for spacing */

} /* The element to be centered, can

also be of any width and height */

.centered {

display: inline-block;

vertical-align: middle;

width: 50%;

}

方法二：可以用table布局方法，但是这种方法也有局限性！写法如下：

XML/HTML Code复制内容到剪贴板

<tr>

Unknown stuff to be centered.

</td>

</tr>

</table>

由于table写法比较费时，你也可以用div代替table,写法如下：html：

XML/HTML Code复制内容到剪贴板

Unknown stuff to be centered.

</div>

css:

CSS Code复制内容到剪贴板

.something-semantic {

display: table;

width: 100%;

}

.something-else-semantic {

display: table-cell;

text-align: center;

vertical-align: middle;

}

方法三，终极解决方法：以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()demo如下：

CSS Code复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>haorooms不固定高度div写法</title>

<style>

.center {

position: fixed;

top: 50%;

left: 50%;

background-color: #000;

width:50%;

height: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

}

</style>

</head>

<body>

</body>

</html>

我上面的css只是针对webkit内核的浏览器，其他内核浏览器写法如下：

CSS Code复制内容到剪贴板

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

有些弹出层的样式，也可以用这个方法居中

CSS Code复制内容到剪贴板

position: fixed;

top: 50%;

left: 50%;

width: 50%;

max-width: 630px;

min-width: 320px;

height: auto;

z-index: 2000;

visibility: hidden;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

无固定高度的div垂直居中代码要点：父容器vc的css属性 display:table;overflow:hidden;子容器vci的css属性 vertical-align:middle;display:table-cell;针对ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

div怎样居中

1、首先打开DW软件进入软件主界面，点击【插入】选项。

2、找到【布局对象】——【Div标签】，即插入一个Div标签。

3、设置类为【1】，再设置CSS样式，设长宽均为300确定。

4、文本是居左的。如果要居中显示，那么就从CSS面板中找到类【1】的CSS样式，并在分类找到Text-align（文本对齐方式）选择center（居中）。

5、最后完成div标签内文本水平居中

div中居中怎么设置

先给DIV的宽度，再设置左右自动对其即可

html5设置div居中

定位 <style> div{width:200px;height:200px;border: solid 1px #000;border-radius:100%;position: absolute;} .div1{left:100px;top:50px;}.div2{left:50px;top:100px;} </style> <div class="div1"></div><div class="div2"></div>

怎么使div居中

1、首先打开Sublime Text软件，新建一个HTML页面，

2、然后我们在html页面中加入div标签，并且在div标签中加入一些文字，

3、接下来我们给div标签编写CSS样式，这里主要是text-align和line-height两个属性，

4、最后我们运行页面程序，你就会在页面中看到div中的文字水平垂直都居中了。

div怎么在div中居中

我用一个笨方法，把分割线做成背景图。li的样式让他高度自适应，background:用分割线背景图垂直平铺。

怎么设置div居中对齐

div里的ul下面的li居中对齐，关键点如下： 1、CSS设置好Li的宽度 2、Li的css加上居中代码text-align:center。例子如下：

居中文字1

居中文字2

居中文字3

居中文字4

居中文字5

居中文字6

div里的div怎么居中

div父元素水平居中，input设为行内块 <div> <inputtype="text"> </div>

标签：设置对齐如何设置代码技巧

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。