<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,body{

            width: 100%;

            height: 100%;

            font-size: 16px;

        }

        *{margin: 0;padding: 0;}

        .box1{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*定位居中*/

            position: relative;

        }

        .box2{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*margin居中*/

            position: relative;

        }

        .box3{

            width: 200px;height: 200px;

            background: #eee;

            margin-top: 10px;

            /*inline居中*/

            text-align: center;

        }

        /*定位+transform居中*/

        .box1 div{border: 1px solid #000;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}

        /*margin居中*/

        .box2 div{border: 1px solid #000;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin:auto;width: 100px;height: 50px}

        /*inline居中*/

        .box3 div{border: 1px solid #000;display: inline-block;vertical-align: middle;}

        .box3:before{content: '';  display: inline-block;  height: 100%;  vertical-align: middle;}

    </style>

</head>

<body>

<div class="box1">

    <div>我想居中</div>

</div>

<div class="box2">

    <div>我想居中</div>

</div>

<div class="box3">

    <div>我想居中</div>

</div>

</body>

</html>

demo:https://controllerone.github.io/test/

css上下左右居中的更多相关文章

  1. CSS上下左右居中对齐

    上下左右居中对齐 display:  inline/inline-block 将父元素(容器)设定 text-align: center: 即可左右置中. display: block 将元素本身的 ...

  2. CSS上下左右居中的几种方法

    1.absolute,margin: auto .container { position: relative; } .content { position: absolute; margin: au ...

  3. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  4. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  5. css布局之块上下左右居中

    以下方案的通用代码: HTML code: <div class="box"> <div class="content"> <!- ...

  6. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  7. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  8. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

  9. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. 自己新机器安装CM时候 server服务启动DB配置

    com.cloudera.cmf.db.type=mysqlcom.cloudera.cmf.db.host=localhost:3306com.cloudera.cmf.db.name=cmfcom ...

  2. (转)Nginx+Php-fpm运行原理详解

    一.代理与反向代理 现实生活中的例子 1.正向代理:访问google.com 如上图,因为google被墙,我们需要vpn翻墙才能访问google.com. vpn对于“我们”来说,是可以感知到的(我 ...

  3. Gabor filter for image processing and computer vision

    介绍 我们已经知道,傅里叶变换是一种信号处理中的有力工具,可以帮助我们将图像从空域转换到频域,并提取到空域上不易提取的特征.但是经过傅里叶变换后,图像在不同位置的频度特征往往混合在一起,但是Gabor ...

  4. RMQ问题——ST算法

    比赛当中,常会出现RMQ问题,即求区间最大(小)值.我们该怎样解决呢? 主要方法有线段树.ST.树状数组.splay. 例题 题目描述 2008年9月25日21点10分,酒泉卫星发射中心指控大厅里,随 ...

  5. thinkphp 虚拟模型

    虚拟模型是指虽然是模型类,但并不会真正的操作数据库的模型.有些时候,我们建立模型类但又不需要进行数据库操作,仅仅是借助模型类来封装一些业务逻辑,那么可以借助虚拟模型来完成.虚拟模型不会自动连接数据库, ...

  6. javascript 释放变量

    JavaScript 释放变量 在Javascript是可以使用“delete”来手动删除变量,通过这样的方法让GC(Garbage collection)来回收内存,但在JS中并不是所有的变量都可以 ...

  7. C++中无数据成员的类的对象占用内存大小

    结论: 对于没有数据成员的对象,其内存单元也不是0,c++用一个内存单元来表示这个实例对象的存在. 如果有了数据或虚函数(虚析构函数),则相应的内存替代1标记自己的存在. PS:以下代码均在win32 ...

  8. [Turn]C# 强制关闭当前程序进程（完全Kill掉不留痕迹）

    C#代码 /// <summary> /// 运行DOS命令 /// DOS关闭进程命令(ntsd -c q -p PID )PID为进程的ID /// </summary> ...

  9. 机器学习中常用的距离及其python实现

    1 概述 两个向量之间的距离(此时向量作为n维坐标系中的点)计算,在数学上称为向量的距离(Distance),也称为样本之间的相似性度量(Similarity Measurement).它反映为某类事 ...

  10. PKU 百炼OJ 简单密码

    http://bailian.openjudge.cn/practice/2767/ #include<iostream> #include <cmath> #include ...