块级元素垂直居中

通常使用的垂直居中方法:

 1 <style>
 2 div{
 3     width:100px;
 4     height:100px;
 5     top:50%;
 6     left:50%;
 7     margin-left:-50px;
 8     margin-top:-50px;
 9     position:absolute;
10     text-align:center;
11     inline-height:100px;
12 }
13 </style>

这种方法不方便的地方是一旦块级元素的宽高度变了后,需要随之改变margin的值,

所以使用translate进行优化:

<style>
 div{
   width:100px;
    height:100px;
     top:50%;
     left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
     -ms-transform:translate(-50%,-50%);
     position:absolute;
     text-align:center;
     inline-height:100px;
 }
</style>

这样无论块级元素宽高如何变,都可以保证垂直居中。

时间: 2024-10-15 12:50:24

块级元素垂直居中的相关文章

块级元素垂直居中的两种方式

第一种方式:利用相对定位将子元素的位置设为父元素高度的一半,再将子元素的margin-top设为自身高度一半,且为负值. <div class="a"> <div class="b"></div></div>.a{ width: 500px; height: 500px: position: relative;}.b{ width: 100px; height: 100px; /*相对定位至父元素高度一半*/ posi

利用伪元素对块级元素应用vetical-align:middle使之垂直居中

vetical-align的功能是使行内元素垂直对齐. 可能的值 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-height&qu

总结一下各种居中(内联元素、块级元素、浮动元素、绝对定位元素)*(水平、垂直)

在平时写网页样式的时候,元素居中应该是最常见不过的了,在这里我们把常见居中的情况简单总结一下.本文讨论以下几种情况:内联元素.块级元素.浮动元素.绝对定位元素.居中的情况分两种情况:水平居中和垂直居中.刚接触到居中,我想到的是两个方向,一是使元素内部的所有元素相对于此元素居中,另一个是元素在其他元素中居中.以下的居中我们讨论的都是元素在其他元素中居中. (一)内联元素 水平居中:只需在其父元素的样式中加上text-align: center;即可. 垂直居中: 1. line-height 2.

如何设置块级元素的单行文本垂直居中

这里有两个条件: ①文本要求是单行的 ②它的外部容器是一个块级元素 满足这两个条件之后,只需要设置文本的line-height等于外部块级元素的高度即可. 参照如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行文本垂直居中</title> <style> h2{ width: 3

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

行内元素和块级元素水平及垂直居中

首先,介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素: ①不占据一整行,随内容而定,有以下特点: ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变. ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用. ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用. 常用的内联元素有: a - 锚点,b - 粗体(不推荐),

让div等块级元素水平以及垂直居中的解决办法

一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中. 二.解决办法 1.CSS让div等块级元素水平居中 原理:让一个div等块级元素水平居中,直接用CSS就可以做到.只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得d

将一个块级元素水平和垂直居中的方法

1.水平居中 方法一:(分宽高定不定两种情况) 定宽高:需要谁居中,就给谁设margin:auto:使盒子(元素)自己居中 1 <style> 2 .father { 3 width: 500px; 4 height: 500px; 5 background-color: yellow; 6 } 8 .son { 9 width: 100px; 10 height: 100px; 11 background-color: pink; 12 margin:auto; 13 } 14 </s

CSS行内元素和块级元素的居中

一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范; 2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高; 3.设置父元素float:lef