布局-水平垂直居中

结构:

1 <div class="parent">
2         <div class="child">DEMO</div>
3     </div>

样式:

1.解决方案一:text-align + inline-block + table-cell + vertical-align(结合前面的水平居中+垂直居中)

 1 .parent {
 2         background-color: grey;
 3         width: 300px;
 4         height: 200px;
 5
 6         display: table-cell;
 7         vertical-align: middle;
 8
 9         text-align: center;
10     }
11     .child  {
12         display: inline-block;
13         background-color: skyblue;
14     }

2.解决方案二: absolute+transform

.parent {
        background-color: grey;
        width: 300px;
        height: 200px;

        position: relative;
    }
    .child  {
        position: absolute;
        top: 50%;/*相对容器的百分比*/
        left: 50%;
        transform: translate(-50%,-50%);/*相对自身的百分比*/
        background-color: skyblue;
    }

3.解决方案三:flex + justify-content + align-items

.parent {
        background-color: grey;
        width: 300px;
        height: 200px;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child  {

        background-color: skyblue;
    }
时间: 2024-11-10 15:36:31

布局-水平垂直居中的相关文章

css布局--水平垂直居中

1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html <div class="parent"> <div class="child">使用vertical-align,text-align,inline-block实现水平垂直居中</div> </div> css .parent{ vertical-align: middle; text-align:

转载:解读CSS布局之-水平垂直居中(1)

本文转自http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/,以及大地dudy的博客http://www.cnblogs.com/Dudy/p/4085292.html. 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有

Flexbox制作CSS布局实现水平垂直居中

Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"/>  <title>Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">    html {      height: 1

等高列布局、水平垂直居中与置顶页脚(转载)

等高列布局 在<八种创建等高列布局>一文中详细介绍了八种创建等高列布局的不同方法.可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕.在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现.接下来我与大家一起探讨几种新方法实现等高列布局. Flexbox方式 Flexbox是一个强大而又神奇的CSS3模块,而且到现在,也得到众开浏览器的支持.有了这个模块,可以帮助我们做很多事情,而且较之以前的方案要更简单,唯一蛋疼的是

转载:解读CSS布局之-水平垂直居中(3)

四. float布局上下文下的水平垂直居中 float + -50% DEMO链接 代码: <div class="wrap"> <div class="ele"> <div class="ele-inner">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中</div>

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加容易了.搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法. 由简至繁: 行内元素的水平居中     要实现行内元素(<span>.<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>.<l

CSS3之flexbox如何实现水平垂直居中和三列等高布局

最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西. 第一个css属性就没有看懂.于是乎,开始各种找资料,各种看书.这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍. 以下的内容会分为如下小节: 1.关于css3中flexbox需要掌握的概念 2.flexbox实现水平垂直居中对齐 3.三列等高自适应,页脚区域黏附底部的布局 1.关于css3中flexbox需要掌握的知识 因为对于三列等高

三栏布局和水平垂直居中demol例子

html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>清除浮动和布局</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <di

解读CSS布局之-水平垂直居中

原文链接:http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/ 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有兼容需要,可以参见这篇文章:http://www.cnblogs.com/Dudy/p/4085292.ht