html中居中方法,HTML中的居中方法

之前我们就总结过很多剧中的方法，但是时间长不用，就会慢慢遗忘，所以我们从头来复习一次，变想边敲代码......

文本居中

height + line-height：两者配合使用，垂直方向居中

text-align：父级的text-align，水平方向居中

注意：text-align：center ；只是将子元素里的内联元素居中

如果不是内联元素就要用到 margin： 0 auto；

写个简单的代码来理解

.word{ width: 100px; height: 30px; background: #E5E5E5; text-align: center; line-height: 30px; font-size: 14px;

}

优秀

文字居中

优秀这两个字在div中妥妥居中。

水平居中

水平居中分两种情况

one：定宽块元素水平居中

定宽 + 块元素

来看看具体的代码.wrap{width:200px;

height:200px;

border:1px solid red;

margin:0 auto;} //宽度必须给值

two：不定宽块元素水平居中

1.改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中.nav{text-align:center;}

.nav ul{display:inline;}

1111111
2222222

2.父元素浮动left：50%;

同时要设置position:relative(给子元素相对定位一个参考)

子元素相对定位position：relative；left：-50%；.wrap{position:relative;

left:50%;

float:left;}

.box{position:relative;

left:-50%;}

一个子级盒子

垂直居中

垂直居中也分两种情况

one：块级元素垂直居中，子元素知道具体宽高

设置top:50%，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置margin-top: -2/父宽 px; //为高度的一半

这样这个块元素又相对于自身最上面向上又移动了自身的50%，因此就垂直居中了。.wrap { //父元素}

.wrap .content {

position: absolute;

width: 100px;

heigth: 100px;

top: 50%;

margin-top: -50px; //为高度的一半}

*** two：子元素不知道具体宽高 ***

这种情况有三种方法

第一种借助table布局；

第二种是借助translate的transform属性:.wrap { position: relative;

}.wrap .content { position: absolute; top: 50%; transform: translateY(-50%);

}

第三种就是用flex布局，非常的简单,代码如下:.wrap{ display: flex; flex-direction: column; justify-content: center;

}

万能居中方法

首先移动子元素高度(宽度)的一半：left：50%;(top:50%;)

再移动父元素高度(宽度)的一半：margin-left:-宽/2;(margin-top:-高/2;)

前提是必须要知道子元素的宽高.wrap{

width: 200px;

height: 200px;

background-color: lightskyblue;

position: relative;

}

.box{

width: 100px;

height: 100px;

background-color: hotpink;

position: absolute;

left:50%;

margin-left: -50px;

}

一个子级盒子

万能居中

绝对居中

子元素必须比父元素小，子元素宽高也必须要知道.wrap{

width: 200px;

height: 200px;

background-color: lightskyblue;

position: relative;

}

.box{

width: 100px;

height: 100px;

background-color: hotpink;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

overflow: auto;

}

绝对居中

可能总结的也不太齐全，会慢慢补全。

作者：Passerbylll

链接：https://www.jianshu.com/p/397f9794c003

打开App，阅读手记

html中居中方法,HTML中的居中方法相关推荐

html col居中无效,html中col标签中的汉字如何居中？html col标签的基本使用(内有实例)...
本篇文章主要的讲解了关于html col标签的汉字居中和col标签的一些基础的使用方法.还有html col标签的基础使用实例.现在让我们一起阅读这篇文章吧首先我们先介绍HTML中的col标签的汉字 ...
html中table标签及其它标签居中
1.style=" margin:auto" 使用margin外边距属性,让其上下左右自动均分剩余空间,就会使其标签居中显示例如table标签: <table border ...
表格在整个html居中显示,html 表格字符居中显示_如何在HTML中居中显示表格？
html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示 HTML table provides the ab ...
html怎么将div居中,在html中怎么把div居中
在html中把div居中的方法是,给div引入一个css样式,然后添加自动居中代码[margin: 0 auto;],利用外边距的左右auto就可以实现div居中了. 本文操作环境:windows10 ...
css td居中_td中字体居中怎么让字体上下居中
html中表格怎样设置文字居中? 可以在CSS:TD{text-对齐:居中}CSS是用HTML编写的,也是HTML的一部分.如果必须完全使用HTML,则只能在每个TD标记中添加align=" ...
html表格整体居中对齐,css中表格如何居中对齐？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 下面我们来看一下 ...
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示接触前端时间不长,费了一些时间 img{display:block;max-width:100%;margin:auto ...
css 图文上下居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
前端中全部盒子靠左对齐_图文详解ul中li内容垂直居中和水平居中的方法
在页面布局时,经常会用到li标签,它可用于列表,导航,选项卡等等,那你知道如何让ul中的li居中吗?这篇文章就和大家讲讲如何让ul中的li水平居中以及如何让li内容垂直居中.感兴趣的朋友继续往下看吧. ...
码匠编程：CSS让元素绝对居中，你知道几种方法？
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充问题描述: 给定两个元素,这两个元素是父子级关 ...

html中居中方法,HTML中的居中方法

html中居中方法,HTML中的居中方法相关推荐

最新文章

热门文章