<!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. iOS开发系列-JSON解析

    概述 JOSN是一种轻量级的数据格式,一般用于数据交互.服务器返回给客户端,一般都是JSON格式或者XML格式. JSON的格式: {"name" : "CoderHon ...

  2. 锐速与BBR的原理简单解析

    锐速与BBR的原理简单解析  4 前言 昨天,有一位朋友在我的文章下留言说,锐速和BBR不都是一样,是拥塞算法嘛.因为这方面需要讲的东西比较多,所以我还是专门水一篇文章吧. 锐速 参考资料: http ...

  3. adb 使用记录

    127.0.0.1:21503 adb kill -server adb start -server adb devices adb logcat | fing "cocos" a ...

  4. C++: Basic knowledge Part 1

    1.在 C++ 程序中调用被 C 编译器编译后的函数,为什么要加 extern “C”? 首先,extern 是 C/C++ 语言中表明函数和全局变量作用范围的关键字,该关键字告诉编译器,其声明的函数 ...

  5. 快速沃尔什变换(FWT) 与 快速莫比乌斯变换 与 快速沃尔什变换公式推导

    后面的图片将会告诉: 如何推出FWT的公式tf 如何推出FWT的逆公式utf 用的是设系数,求系数的方法! ============================================== ...

  6. python中使用xlrd、xlwt操作excel

    python 对 excel基本的操作如下: # -*- coding: utf-8 -*- import xlrd import xlwt from datetime import date,dat ...

  7. VS2010版的Speex音频处理模块(附源码+测试demo)

    开源的Speex代码内部包含了VS2003,05,08工程,但是直接编译总有一些要设置的地方,虽说也不是很复杂,但是对于不是很了解VS的同学来说还是要折腾一阵,所以我弄了一个可以直接使用的版本,当然是 ...

  8. 记录一次dubbo不能正常抛出特定异常

    BUG场景 今天同事的代码中出现一个问题,让我帮忙排查一下.原代码大致如下 dubbo服务消费者: @Resource private IPayWayService payWayService; @R ...

  9. $router 跳转

    vue用$router跳转有三种方法 this.$router.push.replace.go this.$router.push() 跳转到不同的url,但这个方法回向history栈添加一个记录, ...

  10. vs nuget 本地安装 nupkg包

    Install-Package fluentnhibernate -Source C:\Users\Alex\AppData\Local\NuGet\Cache\ 包名 路径