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. 用zrender实现工作流图形化设计（附范例代码）

    公司研发的管理系统有工作流图形化设计和查看功能,这个功能的开发历史比较久远.在那个暗无天日的年月里,IE几乎一统江湖,所以顺理成章地采用了当时红极一时的VML技术. 后来的事情大家都知道了,IE开始走 ...

  2. POJ 3468 A Simple Problem with Integers (splay tree入门)

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 47944   ...

  3. 网络编程_Python-网络模型.

    http://xmdevops.blog.51cto.com/11144840/1861280

  4. 斑马Zebra驱动下载

    Zebra GT800 点击进入下载页-> 自动安装包[WINXP/WIN7/WIN8]点击进入下载页-> 添加打印机向导[WINXP/WIN7/WIN8]   热门下载 · Zebra ...

  5. 如何使用C#关键字const,readonly,static

    如果有一个值不太会变化,我们经常使用const和readonly,这2者有何不同呢?有时候,我们也会在readonly之前加上关键字static,这又意味着什么呢? const ● const默认是静 ...

  6. xcode4.3.2 arc模式下导入非arc的文件 转

    在arc模式下,我们经常会用到非arc的类库,此时我们可以在Compile Sources下对该文件进行编辑加入 -fno-objc-arc   如图中所示,就可以使用非arc的类库了   转:htt ...

  7. <jsp:directive.page import=""/>的用法和解释

    <jsp:directive.page import="zero.space.ch03.BookBean"/>    相当于    <%@ page import ...

  8. Tomcat启动就执行特定方法

    import java.util.Timer; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContex ...

  9. poj 1201 Intervals 解题报告

    Intervals Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu Submit Statu ...

  10. Redis:ERR operation not permitted

    Redis服务开启之后: D:\Redis\redis>redis-server.exe redis.conf 那么另外开一个命令窗口 D:\Redis\redis>redis-cli.e ...