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. chrome 浏览器 console 加入 jquery 测试调试 一介布衣

    chrome 浏览器 console 加入 jquery 测试调试 一介布衣   var jquery = document.createElement('script'); jquery.src = ...

  2. MYSQL 源码- 淘宝数据库研发组

    http://mysql.taobao.org/index.php?title=%E8%B5%84%E6%96%99%E5%85%B1%E4%BA%AB

  3. NativeXml

    NativeXml GITHUB: https://github.com/kattunga/NativeXml THIS IS A FORK WITH SOME FIXES AND IMPROVEME ...

  4. 单独配置secondarynamenode

    一.配置说明 这是在我之前yarn框架上通过加入节点,改动相关的配置文件,使得secondarynamenode独立出来的,所以这里前期的一系列琐碎配置请參考我之前的博客: http://blog.c ...

  5. 算法：堆（Heap）

    背景 Heap 可以用来实现优先级队列,也可以用来做堆排序,本文简单的做个介绍. Heap 规则 是一个完全二叉树,隐含的意思是:他是平衡的.使用数组进行存储也是连续的. 给定的任意节点,该节点小于等 ...

  6. spring mvc获取header

    两种方法: 1.在方法参数中加入@RequestHeader 2.在类级别注入HttpServletRequest 建议使用第二种方法,这样可避免每个方法都加入HttpHeaders参数 @Contr ...

  7. Dom4j学习笔记

    一.Loading XML Data 以下代码从File中或一个URL中读取一个XML文件,并产生一个Document对象.一个Document对象表示了内存中的一棵XML树,可以在这个XML树中进行 ...

  8. 《Windows核心编程》第十一章——线程池

    隐式使用工作项 #include <iostream> #include <windows.h> ; VOID NTAPI SimpleCallback(PTP_CALLBAC ...

  9. 数据结构及算法篇bsearch crypt lfind lsearch qsort rand srand

    crypt(将密码或数据编码) 相关函数 getpass 表头文件 #define _XOPEN_SOURCE #include<unistd.h> 定义函数 char * crypt ( ...

  10. 【BZOJ】【2595】【WC2008】游览计划

    Orz zky神犇http://blog.csdn.net/iamzky/article/details/42029921 spfa的灵活应用!(好像是求了一个叫做斯坦纳树的东西……) o(︶︿︶)o ...