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. unity热更新

    Unity3D 学习笔记4 —— UGUI+uLua游戏框架 C#Light 和 uLua的对比第二弹 在Unity中使用Lua脚本:语言层和游戏逻辑粘合层处理 Ulua_toLua_基本案例 Uni ...

  2. Openfiler能把标准x86/64架构的系统变成一个强大的NAS、SAN存储和IP存储网关

    http://www.linuxprob.com/vmware-openfiler.html

  3. powerdesigner反向SQLServer2008数据库生成物理数据模型

    方法一:通过数据库脚本生成物理数据模型 具体步骤如下图所示:

  4. HDU5087 Revenge of LIS II (LIS变形)

    题目链接:pid=5087">http://acm.hdu.edu.cn/showproblem.php?pid=5087 题意: 求第二长的最长递增序列的长度 分析: 用step[i ...

  5. [翻译] FreeStreamer 在线流媒体播放

    FreeStreamer https://github.com/muhku/FreeStreamer Introduction FreeStreamer is an audio player engi ...

  6. PHP SQL防注入

    过年前后在做一个抽奖的东西,需要用户填写中奖信息,为了防止非法用户对数据库进行入侵神马的,于是写下基本的防注入语句,需要用的可以自己封装成一个function. $str = str_replace( ...

  7. 【BZOJ】【2741】【FOTILE模拟赛】L

    可持久化Trie+分块 神题……Orz zyf & lyd 首先我们先将整个序列搞个前缀异或和,那么某一段的异或和,就变成了两个数的异或和,所以我们就将询问[某个区间中最大的区间异或和]改变成 ...

  8. 关于编码问题，报错：'gbk' codec can't encode character '\u3164' in position 0: illegal multibyte sequence

    之前经常在写入文件的时候遇到这种报错, 'gbk' codec can't encode character '\u3164' in position 0: illegal multibyte seq ...

  9. 搭建个人博客-hexo+github

    自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家提前有个心理准备 - _-) 一.第一步 ...

  10. 【Multiple backgrounds】用CSS3实现网页多重背景

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式).background-positio ...