精华内容
下载资源
问答
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
  • 在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • div垂直居中的N种方法 单行/多行文字(未知高度/固定高度) 说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在...
  • 接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈,或许本文所提供的方法对你有所帮助
  • DIV和SPAN如何垂直居中对齐,水平居中很简单,设置text-align:center就可以了,垂直居中一直很是疑惑,下面为大家解惑
  • 主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
  • 昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享
  • 针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。
  • css设置div垂直居中

    千次阅读 2019-07-16 15:36:08
    一开始想着直接对div用margin-top:50%就行了,但不知道为什么会移到很下面,margin-top:12.5%才刚好居中,这个问题暂时还没有解决。 这里介绍的方法是使用top和transform来实现div的一个居中。 html文件 <%@ page...

    一开始想着直接对div用margin-top:50%就行了,但不知道为什么会移到很下面,margin-top:12.5%才刚好居中,这个问题暂时还没有解决。

    这里介绍的方法是使用top和transform来实现div的一个居中。

    html文件

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/height.js"></script>
    <title>首页</title>
    </head>
    <body>
    	<div class="page">
    		<form action="">
    			<table>
    				<tr>
    					<td></td>
    					<td><strong>用户登录</strong></td>
    				</tr>
    				<tr>
    					<td><label for="id">用户名:</label></td>
    					<td><input type="text" class="form-control" name="id" id="id"/></td>
    				</tr>
    				<tr>
    					<td><label for="pwd">密码:</label></td>
    					<td><input type="password" class="form-control" name="pwd" id="pwd"/></td>
    				</tr>
    				<tr>
    					<td></td>
    					<td><button type="submit" class="btn">登录</button></td>
    				</tr>
    			</table>
    		</form>
    	</div>
    </body>
    </html>
    

    css文件

    html,body{width:100%;height:100%;padding:0;margin:0;}
    .page{width:280px;height:215px;border:1px #CCCCCC solid;padding:20px 30px;margin:0px auto;font-size:15px;top:50%;transform:translateY(-50%);position:relative;}
    .page td{padding:8px 3px;font-size: 13px;}
    .page input{width:130px;height:20px;font-size:13px;}
    .page button{font-size:13px;}
    

    这里有几个要注意的点:
    1.html 和 body 标签需要设置高度百分之百,并且将padding和margin清除,不然会有滚动条
    2.div的position不能用默认的static,static是不能移动的,这里不需要使用absolute和fixed,因为relative是不会使元素脱离文档流的,absolute和fixed则会。所以这里使用relative就行了
    3.这里的原理是想下移动父级div高度的50%,即top:50%
    然后再将div向上移动它的高度的50%,即transform:translateY(-50%),这样就实现了一个垂直居中的效果

    在寻找方法的时候,找了下怎么用jquery获取窗口的height,这里也和大家分享一下:

    $(document).ready(function(){
    alert($(window).height()); //浏览器当前窗口可视区域高度
    alert($(document).height()); //浏览器当前窗口文档的高度
    alert($(document.body).height());//浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
    
    alert($(window).width()); //浏览器当前窗口可视区域宽度
    alert($(document).width());//浏览器当前窗口文档对象宽度
    alert($(document.body).width());//浏览器当前窗口文档body的宽度
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
    
    })
    
    展开全文
  • div垂直居中

    2019-05-25 02:09:03
    NULL 博文链接:https://xiaozmn.iteye.com/blog/453299
  • div垂直居中的N种方法

    2011-11-02 17:44:34
    div垂直居中的N种方法,div垂直居中的N种方法
  • 经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
  • css div垂直居中对齐In the HTML and CSS world, it's all about the layout structure and the distribution of elements. We usually use HTML to define the markup and structure, while CSS helps us handle ...

    css div垂直居中对齐

    In the HTML and CSS world, it's all about the layout structure and the distribution of elements. We usually use HTML to define the markup and structure, while CSS helps us handle the styling and alignment of elements.

    在HTML和CSS世界中,一切都与布局结构和元素的分布有关。 我们通常使用HTML来定义标记和结构,而CSS则可以帮助我们处理元素的样式和对齐方式。

    In this post we are going to learn a little bit about the different ways we can center HTML elements and handle vertical alignment with CSS.

    在本文中,我们将学习一些有关将HTML元素居中并使用CSS处理垂直对齐的不同方法。

    First we going to learn how to align text with CSS.

    首先,我们将学习如何将文本与CSS对齐。

    Next, we will cover how to align a div and any other elements.

    接下来,我们将介绍如何对齐div和任何其他元素。

    And finally we will learn how we can put text and a div together within a container.

    最后,我们将学习如何将文本和div放在容器中。

    如何居中文字 (How to center text )

    There are many way to center text using CSS.

    使用CSS可以使文本居中的方法有很多。

    使用Float属性 (Using the Float property)

    Float is an easy way to align text.

    浮动是对齐文本的简单方法。

    To place the text on the right side of the layout, we can simply use right  as a value for float.

    要将文本放置在布局的右侧,我们可以简单地使用right作为float的值。

    To place the text on the left side, we use left, like float:left. Look at the example below:

    要将文本放在左侧,我们使用left ,就像float:left 。 看下面的例子:

    .right {
            float: right;
          }
         
          .left {
            float: left;
          }
    // HTML
    
        <span class="right">Right</span>
        <span class="left">Left</span>

    To center the text using float we can use margin-left or margin-right and make it  50%, like below.

    要使用float使文本居中,我们可以使用margin-leftmargin-right并将其设置为50% ,如下所示。

    .center {
        float: left;
        margin-left: 50%;
        }
    
    /* HTML*/
    <span class="center">Center</span>

    You can learn more about the uses of Float here.

    您可以在此处了解有关Float更多信息。

    使用文字对齐 (Using Text-align)

    text-align is a more convenient and more specific way to align text. It allows us to place the text at the center or to the left or right side, as the following example shows:

    text-align是一种更方便,更具体的文本对齐方式。 它使我们能够将文本放置在centerleftright ,如以下示例所示:

    .right {
    text-align: right;
    }
    
    .left {
    text-align: left;
    }
    .center {
    text-align: center;
    }
    /* HTML */
    
    <p class="right">Right</p>
    <p class="center">Center</p>
    <p class="left">Left</p>

    Learn more about text-align.

    了解有关text-align更多信息。

    如何对齐div (How to align a div )

    Well, there are a plenty of ways to do that.

    好吧,有很多方法可以做到这一点。

    The same way we use Float to align text, we can use it to align a div element as well.

    与使用Float对齐文本的方式相同,我们也可以使用它对齐div元素。

    Float does the job, but CSS gives us better options that are more convenient and elegant. Have you heard of Flexbox? Or css-grid?

    Float可以完成工作,但是CSS为我们提供了更好的选择,更加方便和优雅。 您听说过Flexbox吗? 还是CSS网格

    Well, these two methods provide very modern ways to align and work with your layout in CSS. Let's look at Flexbox in more in detail.

    好吧,这两种方法提供了非常现代的方式来对齐和使用CSS中的布局。 让我们更详细地了解Flexbox。

    弹性盒 (Flexbox  )

    Flexbox offers an easy and straightforward way to align a div – and it's my favorite method so far to handle layouts in CSS (I use it everyday).

    Flexbox提供了一种简单且直接的方法来对齐div –这是迄今为止我最喜欢的用于处理CSS布局的方法(我每天都使用它)。

    Let's look at what we'd do with Flexbox to see how it works by recreating the same example as above.

    让我们看看我们如何通过重新创建与上面相同的示例来对Flexbox进行操作,以了解其工作原理。

    The example:

    这个例子:

    The code:

    代码:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Flexbox</title>
        <style>
          .container {
            display: flex;
          }
          .container div {
            width: 33%;
            height: 60px;
          }
    
          .left {
            background: yellow;
          }
          .right {
            background: red;
          }
          .center {
            background: lightblue;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="left">Left div</div>
          <div class="center">centered div</div>
          <div class="right">right div</div>
        </div>
      </body>
    </html>

    let's break it down

    让我们分解一下

    • We always define a div  parent using display:flex to apply Flexbox. So we make all the div's children inside the parent div able to be handled using Flexbox properties .

      我们总是使用display:flex定义div父级来应用Flexbox 。 因此,我们可以使用Flexbox属性处理父div所有div的子Flexbox

    • The  flex-direction uses the row direction by default, which means the elements will be placed vertically within the container.

      flex-direction默认使用row方向,这意味着元素将垂直放置在容器中。

    • With the justify-content property we can align a div's children(s) in different directions like the following example:

      使用justify-content属性,我们可以沿不同的方向对齐div的子级,如以下示例所示:

    .container{
     display: flex:
     justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */
    
    }
    • justify-content:center  places the elements in the center of the container.

      justify-content:center将元素放置在容器的中心。

    • justify-content:flex-start puts the elements at the beginning of the container on the left.

      justify-content:flex-start将元素放在容器左侧的开头。

    • justify-content:flex-end places elements at the end of the container on the right side.

      justify-content:flex-end将元素放在容器右侧的末尾。

    • justify-content:space-around makes the elements fit in the container and puts an equal gap between all the elements.

      justify-content:space-around使元素适合容器,并在所有元素之间放置相等的间隙。

    • justify-content:space-evenly distributes the elements within the parent container equally with the same space, and same width.

      justify-content:space-evenly将元素justify-content:space-evenly分布在父容器中,并具有相同的空间和相同的宽度。

    The example above applies to all elements' children as a group.

    上面的示例适用于所有元素的子级。

    Imagine if  we wanted to align a single div inside the container. We can always use align-self to align a single element.

    想象一下,如果我们想在容器内对齐单个div 。 我们总是可以使用align-self来对齐单个元素。

    .container div{
     align-self:center /* can have: flex-start, or flex-end*/
    }

    We can apply the same thing to a text with Flexbox as in the following example:

    我们可以使用Flexbox将相同的内容应用于文本,如以下示例所示:

    <style>
    .right{
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }
      
    </style>
    <div class="right">
    <span>right div</span>
    </div>

    This is a great tweet by Julia Evans which illustrates centering in CSS in general:

    这是Julia Evans的很棒的推文,说明了CSS的总体定位:

    结语 (Wrap up)

    There are many way to center elements in CSS. And you will always learn new things over time as you practice more and more.

    在CSS中有多种居中元素的方法。 随着您越来越多地练习,您将总是随着时间的流逝学习新事物。

    So I recommend that you work through some examples from what you learned today so it sticks.

    因此,我建议您从今天学到的例子中学习一些实例,以便坚持下去。

    翻译自: https://www.freecodecamp.org/news/html-center-text-how-to-css-vertical-align-a-div/

    css div垂直居中对齐

    展开全文
  • 子div在父div垂直居中的最好方法

    千次阅读 2019-04-04 14:14:00
    子div在父div垂直居中的最好方法 父div设display:flex;align-items:center; 具体的flex弹性布局自行谷歌或百度 此处注明一个以前我一直以为可以垂直居中的使用方法,其实是错误的,如果不信,可以自己自行试一遍...

    子div在父div垂直居中的最好方法

    父div设display:flex;align-items:center;

    具体的flex弹性布局自行谷歌或百度


    此处注明一个以前我一直以为可以垂直居中的使用方法,其实是错误的,如果不信,可以自己自行试一遍就知道了。

    下面是详细的错误方法

    父div设vertical-align:middle;还要设line-height
    子div设display:inline-block;
    两个div都是有高度的。

    事实上子div在父div中并没有垂直居中(文字垂直居中了,但是也不是绝对意义上的),自行尝试以上设置。

    这里讲一下为什么我会被骗,以为可以垂直居中。

    首先一个父div,两个子div.
    其中两个子div高度不同。

    然后通过上述设置后,会发现两个子div是默认底部对齐,并且两个子div相对父div也绝不是垂直居中(绝对意义上的)

    这时有意思的就来了,你在两个子div中相对较高的那个插入vertical-align:middle;

    你看一下效果,是不是好像两个子div就相对于父div垂直居中了。

    解释:
    其实,当你对较高的子div设置了vertical-align:middle后,就是指这个子div(inline-block)里的内容要垂直居中,那么相对于子div来说
    (因为之前里面的东西是底部对齐),它就往下移了。

    不懂的,仔细看两遍,或者自己实验一下就明白了。

    以前一直没注意过这个问题,希望能帮助到大家。

    展开全文
  • 要实现盒模型中的div居中,可以使用display:table-cell方法且兼容多浏览器,下面有个示例,感兴趣的朋友可以练练手
  • 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div...固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top:

    我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。

    固定高宽div垂直居中

    enter image description here

    如上图,固定高宽的很简单,写法如下:

     position: absolute;
     left: 50%;
     top: 50%;
    width:200px;
    height:100px;
    margin-left:-100px;
    margin-top:-50px;

    不固定高宽div垂直居中的方法

    方法一:

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

    html如下:

    <div class="block" style="height: 300px;">
    
        <div class="centered">
            <h1>haorooms案例题目</h1>
            <p>haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
        </div>
    
    </div>

    css如下:

    /* 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布局方法,但是这种方法也有局限性!

    写法如下:

    <table style="width: 100%;">
      <tr>
         <td style="text-align: center; vertical-align: middle;">
              Unknown stuff to be centered.
         </td>
      </tr>
    </table>

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

    html:

    <div class="something-semantic">
       <div class="something-else-semantic">
           Unknown stuff to be centered.
       </div>
    </div>

    css:

    .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如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <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>
        <div class="center"></div>
    </body>
    </html>

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

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

    关于每个浏览器的写法,可以看看我之前的一篇文章:http://www.haorooms.com/post/css_common

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

    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%);

    css3不定宽高水平垂直居中

    只要三句话就可以实现不定宽高水平垂直居中。

    justify-content:center;//子元素水平居中
    align-items:center;//子元素垂直居中
    display:-webkit-flex;

    在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。

    运用margin:auto进行垂直居中

    margin的值设置为auto,可以让我们对剩余空间进行分配!我们知道,块级元素设置为margin:0 auto;可以左右居中显示!那有没有办法让margin设置为margin:auto之后,上下左右都居中呢?上下左右都居中,就可以实现我们的垂直居中了!

    答案是有的,只要我们让上下有足够的空间,就可以让margin的auto来分配上下空间。

    我们可以利用定位的方式,让margin上下左右都有足够的空间!那么就可以用margin:auto来实现垂直居中了!

    实现html如下:(做一个简单的垂直弹框)

    <div class="father">
        <div class="son"></div>
    </div>

    css代码如下,很简单,兼容性也蛮好,支持IE8+

    .father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
    .son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}

    这样就可以实现垂直居中了,是不是很简单?!!

    我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。

    固定高宽div垂直居中

    enter image description here

    如上图,固定高宽的很简单,写法如下:

     position: absolute;
     left: 50%;
     top: 50%;
    width:200px;
    height:100px;
    margin-left:-100px;
    margin-top:-50px;

    不固定高宽div垂直居中的方法

    方法一:

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

    html如下:

    <div class="block" style="height: 300px;">
    
        <div class="centered">
            <h1>haorooms案例题目</h1>
            <p>haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
        </div>
    
    </div>

    css如下:

    /* 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布局方法,但是这种方法也有局限性!

    写法如下:

    <table style="width: 100%;">
      <tr>
         <td style="text-align: center; vertical-align: middle;">
              Unknown stuff to be centered.
         </td>
      </tr>
    </table>

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

    html:

    <div class="something-semantic">
       <div class="something-else-semantic">
           Unknown stuff to be centered.
       </div>
    </div>

    css:

    .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如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <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>
        <div class="center"></div>
    </body>
    </html>

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

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

    关于每个浏览器的写法,可以看看我之前的一篇文章:http://www.haorooms.com/post/css_common

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

    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%);

    css3不定宽高水平垂直居中

    只要三句话就可以实现不定宽高水平垂直居中。

    justify-content:center;//子元素水平居中
    align-items:center;//子元素垂直居中
    display:-webkit-flex;

    在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。

    运用margin:auto进行垂直居中

    margin的值设置为auto,可以让我们对剩余空间进行分配!我们知道,块级元素设置为margin:0 auto;可以左右居中显示!那有没有办法让margin设置为margin:auto之后,上下左右都居中呢?上下左右都居中,就可以实现我们的垂直居中了!

    答案是有的,只要我们让上下有足够的空间,就可以让margin的auto来分配上下空间。

    我们可以利用定位的方式,让margin上下左右都有足够的空间!那么就可以用margin:auto来实现垂直居中了!

    实现html如下:(做一个简单的垂直弹框)

    <div class="father">
        <div class="son"></div>
    </div>

    css代码如下,很简单,兼容性也蛮好,支持IE8+

    .father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
    .son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}

    这样就可以实现垂直居中了,是不是很简单?!!

    展开全文
  • div垂直居中(全兼容ie6+)

    千次阅读 2018-12-03 15:53:25
    忘记从哪里借鉴的了,直接贴上: &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&...全兼容垂直居中&lt;/title&gt; &lt;style type="text/css"&am
  • css 文本和div垂直居中方法汇总

    万次阅读 多人点赞 2016-07-04 14:10:07
    本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。
  • 主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下
  • 主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
  • 主要介绍了CSS文本和div垂直居中方法总结,包括多行文本垂直居中,单行文本垂直居中,子div垂直居中,感兴趣的小伙伴们可以参考一下
  • 不固定高宽div垂直居中的方法 1、伪元素和 inline-block / vertical-align <style> .box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right...
  • div垂直居中的两种方法 表格方法 display:flex; /* 第一种方法,DIV垂直居中 表格方法 */ display: table-cell; vertical-align:middle; /*DIV 垂直居中 第二种方法*/ display: flex; /*Flex是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,520
精华内容 21,408
关键字:

div垂直居中