CSS3中DIV水平垂直居中-2(3)

用到CSS3中display的新属性。

HTML

<div class="parent">

</div>

CSS

html,body{
    width: 100%;
    height: 100%;
}
/*方法二*/
body{
    display: flex;
    align-items: center;/****水平居中****/
    justify-content: center;/*垂直居中*/
}
.parent{
    width: 750px;
    height: 400px;
    background: orange;
    /*方法一*/
    /*margin: 0 auto;*/
    /*position: relative;*/
    /*top: 50%;*/
    /*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/
}

还有一种关于table的方法不常用。这三种都长用到！

时间： 2025-01-01 00:50:04

CSS3中DIV水平垂直居中-2(3)的相关文章

css div水平垂直居中几个例子

一.未知宽度水平居中  代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>未知宽高div在页面内水平垂直居中</title> <style> *{margin:0; padding:0;} body,html{overflow:hidden; height:100%;} .box {height: 100%; ov

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

实例如下: if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window).height(); var o

css中元素水平垂直居中4种方法介绍

  table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对block元素不起作用,但对table-cell元素是有效的)设置元素垂直居中,即可达到我们想要的效果. IE7及以下版本不支持此方法,IE8及以上版本及大部分的主流浏览器都很好的支持. HTML代码  代码如下   <div class="img">     <img s

css实现在div水平垂直居中与图片水平居中的效果

div居中的完美解决方案! (水平垂直居中) 1,关于居中使用css为:  代码如下 复制代码 position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 对于ie6,只能把position:改成absolute; 图片在div中居中 利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 方法一: css代码如下:  代码如下 复制代码 div {width:300px; h

css中div百分比垂直居中几种方法

前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下:  代码如下 复制代码  position: absolute;  left: 50%;  top: 50%; width:200px; height:100px; margin-left:-10

经常用的图片在容器中的水平垂直居中实例_javascript技巧

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"Centering an image of unknown size in an outer container of known size". 这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式. IE使用inline-blocks,非IE使用table-cell and vertic

jquery实现div水平垂直居中例子

jquery统计出来  代码如下 复制代码 if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window)

CSS实现DIV水平 垂直居中-1

水平大家都知道,一般固定宽度给个margin:0 auto:就可以了.下面实现水平垂直都居中 HTML <div class="parent"> </div> css html,body{ width: 100%; height: 100%; } .parent{ width: 750px; height: 400px; background: orange; /*水平居中*/ margin: 0 auto; position: relative; top: 5

CSS让DIV水平垂直居中（兼容IE/FF/google浏览器）

实例  代码如下 复制代码 <style type="text/css"> body { margin: 0; padding: 0; background: #1d1d1d; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font: 4em Georgia, "Times New Roman", Times, serif; color: #fff;