如何让div里面的<a><a>水平居中_安全

说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 mydiv{margin:0auto;width:300px;height:200px;}但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。 CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要d出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。 jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下： $(window)resize(function(){$( "mydiv" )css({position:"absolute", left:($(window)width()-$( "mydiv" )outerWidth())/2, top:($(window)height()-$( "mydiv" )outerHeight())/2});});此外在页面载入时，就需要调用resize()。$(function(){ $(window)resize();});此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的d出层效果中应用。

实现效果：

利用定位margin取值让子元素居中 :

margin取值应为子元素宽高的一半（margin的取值可以为负值，但padding显然不行）， 缺点是 必须知道子元素的宽高具体大小且需要计算，当子元素的大小被修改后对应的margin值也需要修改否则达不到剧中的效果，从而引导我们使用更方便快捷的方法。
利用定位与transform实现垂直水平居中 ：

transform：translate（-50%，-50%）第一个-50%是指x轴方向向左位移 子元素本身 宽的百分之50，而第二个-50%是指元素在y轴方向向上平移 子元素本身 高的百分之50。
二者的原理是相同的都是在加了 left：50% 与 top：50% 后再减去盒子宽高的一半来实现水平垂直居中。

给父元素添加display：flex；让它变成d性盒，在利用justify-content: center;与 align-items: center;，让子元素在主轴与交叉轴（纵轴）方向居中。 缺点是 在网页端d性盒因为兼容问题一般不被经常使用。

设置一个元素在一个容器中垂直居中，必须更改默认的 display 属性值为 inline-block; 并加上同级元素（标尺）（同级元素[标尺]样式设置为 vertical-align:middle;width:0;height:100%;display:inline-block; ）
三个条件：

原理类似于利用d性布局，将父元素转换为网格元素再利用 ustify-items：center （内容在单元格内的水平对齐方式），和 align-items：center；（内容在单元格内垂直对齐方式） place-items 为复合写法，相当于父元素为一个一行一列的单元格而box1为它单元格中的元素。（其实很利用 place-content 也能做到原理还没搞懂）

方法如下：

在布局一张网页时，通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。

一条件：
这个时候对“body”设置css内容居中样式（text-align:center）

即CSS代码：body{text-align:center}

一设置：

这个时候对“#divcss5”设置居中必备样式css margin
即CSS代码：#divcss5{margin:0 auto}

为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。

最终得到DIV居中的CSS代码：

body{ text-align:center}

#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}

对应html代码片段：

<div id="divcss5">DIV水平居中案例</div>

居中案例截图

<div style="width:200px; height:150px; background:red; padding-top:50px;">
<div style="width:100px; height:100px; background:white; margin:0px auto"></div>
</div>有一点要注意，内部标签加margin:0px
auto即可水平居中，但是标签必须设置宽度才有效，如果内部标签需要自动伸展宽度又要水平居中，那么div不太好办到，不妨使用table来实现，举例如下：
<div style="width:200px; height:150px; background:red; padding-top:50px;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px auto">
<tr>
<td style="height:100px; background:white;">11111</td>
</tr>
</table>
</div>

主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
如何使在DIV 中垂直居中
用背景的方法。举例：
body{BACKGROUND: url(/uploadfiles/2006/05181435734gif) #FFF no-repeat center;}
关键就是最后的center,这个参数定义的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"。
如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>
说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/13405016.html

如何让div里面的<a><a>水平居中

发表评论

评论列表（0条）

如何让div里面的&lt;a&gt;&lt;a&gt;水平居中

发表评论

评论列表（0条）

如何让div里面的<a><a>水平居中