1、定位

核心代码实现请看示例代码中的注释：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>CSS水平垂直居中实现方式--定位实现</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .p{

                /*父元素为除了static以外的定位方式*/

                position: relative;

                /*position: absolute;*/

                /*position: fixed;*/

                width: 500px;

                height: 500px;

                border: 1px solid red;

            }

            .c{

                /*子元素为绝对定位*/

                position: absolute;

                width: 200px;

                height: 200px;

                /*top、bottom、left和right 均设置为0*/

                top: 0;

                bottom: 0;

                left: 0;

                right: 0;

                /*margin设置为auto*/

                margin:auto;

                border: 1px solid green;

            }

        </style>

    </head>

    <body>

        <div class="p">

            <div class="c">

                子元素

            </div>

        </div>

    </body>

</html>

效果：

2、table-cell布局

核心代码实现请看示例代码中的注释：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>CSS水平垂直居中实现方式--定位实现</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            .p{

                width: 500px;

                height: 500px;

                border: 1px solid red;

                display: table-cell;

                /*vertical-align: middle; 实现垂直居中*/

                vertical-align: middle;

            }

            .c{

                width: 200px;

                height: 200px;

                border: 1px solid green;

                /*margin: 0 auto; 实现水平居中*/

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div class="p">

            <div class="c">

                子元素

            </div>

        </div>

    </body>

</html>

效果同上。

3、flex布局

核心代码实现请看示例代码中的注释：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>CSS水平垂直居中实现方式--定位实现</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .p {

                width: 500px;

                height: 500px;

                border: 1px solid red;

                /*flex 布局*/

                display: flex;

                /*实现垂直居中*/

                align-items: center;

                /*实现水平居中*/

                justify-content: center;

            }

            .c {

                width: 200px;

                height: 200px;

                border: 1px solid green;

            }

        </style>

    </head>

    <body>

        <div class="p">

            <div class="c">

                子元素

            </div>

        </div>

    </body>

</html>

效果同上，注意浏览器兼容性问题。

4、translate+relative定位

核心代码实现请看示例代码中的注释：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>CSS水平垂直居中实现方式--定位实现</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .p {

                width: 500px;

                height: 500px;

                border: 1px solid red;

            }

            .c {

                width: 200px;

                height: 200px;

                border: 1px solid green;

                /*relative 定位*/

                position: relative;

                /*top和left偏移各为50%*/

                top: 50%;

                left: 50%;

                /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/

                transform: translate(-50%, -50%);

            }

        </style>

    </head>

    <body>

        <div class="p">

            <div class="c">

                子元素

            </div>

        </div>

    </body>

</html>

效果同上，注意浏览器兼容性问题。

CSS实现水平垂直居中方式的更多相关文章

  1. css之水平垂直居中方式

    布局中常用到的水平垂直居中问题 作为一个前端开发人员,布局是我们日常工作中解除最多的,而水平垂直居中也必不可少的出现,面试中也经常遇到噢- 一.position:absolute(固定宽高) widt ...

  2. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  3. 你知道CSS实现水平垂直居中的第10种方式吗？

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  4. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  5. css实现水平垂直居中的几种方式

    梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...

  6. CSS实现水平垂直居中的方式有哪些？

    CSS实现水平垂直居中的方式有哪些? 基本结构样式: .box { width: 400px; height: 400px; background-color: red; } .inner { wid ...

  7. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  8. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

随机推荐

  1. Flash Builder 4的快捷方式和调试技巧

    Flash Builder 4的快捷方式和调试技巧 来自于flex开发人员中心:http://www.adobe.com/cn/devnet/flex/articles/flashbuilder_sh ...

  2. 实效云计算用户组(ECUG) 与 阿里云

    http://www.ecug.org/ http://www.aliyun.com/   阿里云

  3. Windows程序调试系列: 使用VC++生成调试信息 转

    Windows程序调试系列: 使用VC++生成调试信息 ZhangTao,zhangtao.it@gmail.com, 译自 “Generating debug information with Vi ...

  4. spring mvc实现restful

    restful它的核心是将所有的 Api 都理解为一个网络资源.把api映射成资源 restful它的核心是将所有的 Api 都理解为一个网络资源.把api映射成资源 把api映射成资源,把api映射 ...

  5. Sublime Text3 配置 Python2 Python3

    { "cmd": "C:/Python27/python.exe", "-u", "$file"], "fil ...

  6. idea 配置简单web

    1.创建Facets 创建web的facets,可修改web的目录路径,如java目录 2.创建artifacts 创建web aplication exploded ,添加lib包到web-inf, ...

  7. 简明python教程 --C++程序员的视角（三）：模块

    模块和包 1 python程序由包(package).模块(module)和函数组成.包是由一系列模块组成的集合.模块是处理某一类问题的函数和类的集合.函数是一段可以重复多次调用的代码. 2 pyth ...

  8. @Java中使用Jedis操作Redis之一

    依赖的jar包:jedis <dependency> <groupId>redis.clients</groupId> <artifactId>jedi ...

  9. iOS:UIScrollView控件和UIPageControl控件的详解

    UIScrollView滚动视图控件和UIPageControl分页视图控件:    UIScrollView用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看,当然UIPagecon ...

  10. Android中Dialog对话框的调用及监听

    Android中经常会需要在Android界面上弹出一些对话框提示用户,比如App的退出的时候都会有各种框来挽留你的心,支付宝的时候输入密码的密码框,非常常见及其实用的功能,类似于JS中的alter, ...