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. weblogic安装使用: Could not Create the Java Virtual Machine

    第一次使用weblogic,完全不明白是怎么一回事!找安装包花了大把时间!找到了不知道怎么安装 -- _ --||| 找了一篇安装文档<weblogic 安装部署手册.doc>, 位于:[ ...

  2. 用最简单的例子理解对象为Null模式(Null Object Pattern)

    所谓的"对象为Null模式",就是要求开发者考虑对象为Null的情况,并设计出在这种情况下的应对方法. 拿"用最简单的例子理解策略模式(Strategy Pattern) ...

  3. C# 获得当前 进程 或 线程的ID

    如果获得当前进程的Id用: Process[] processes = Process.GetProcesses(); foreach(Process process in processes) {  ...

  4. 【docker-compose】使用docker-compose启动spring-boot+mysql，服务内连数据库报错：create connection SQLException, url: jdbc:mysql://mysql:33061/swapping?useSSL=false&useUnicode=true&characterEncoding=UTF-8, errorCode 0,

    完整配置在这里, https://www.cnblogs.com/sxdcgaq8080/p/10070948.html 启动报错如下: 2018-12-05 01:04:05.569 ERROR 1 ...

  5. 栅栏加解密python实现（支持密钥加密）

    栅栏加解密是对较短字符串的一种处理方式.给定行数Row,依据字符串长度计算出列数Column,构成一个方阵. 加密过程:就是按列依次从上到下对明文进行排列,然后依照密钥对各行进行打乱.最后以行顺序从左 ...

  6. 终端控制类getopt isatty select ttyname

    getopt(分析命令行参数) 相关函数 表头文件 #include<unistd.h> 定义函数 int getopt(int argc,char * const argv[ ],con ...

  7. Hadoop Hive sql 语法详解

    Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构化的数据文件映射为一张数据库表,并提供完整的SQL查询 ...

  8. ubuntu 安装 mongodb 数据库

    第一步:下载安装包 下载版本:3.0.1 下载链接:http://www.mongodb.org/downloads 首先在linux中解压缩安装程序 通过命令操作: 解压:[root@localho ...

  9. java使用省略号代替多参数（参数类型... 参数名）

    J2SE 1.5提供了“Varargs”机制.借助这一机制,可以定义能和多个实参相匹配的形参.从而,可以用一种更简单的方式,来传递个数可变的实参.本文介绍这一机制的使用方法,以及这一机制与数组.泛型. ...

  10. rotate-function

    https://leetcode.com/problems/rotate-function/ public class Solution { public int maxRotateFunction( ...