web中文字和div常用的居中方法（html/css） |
您所在的位置：网站首页 › web前端怎么设置字体颜色深浅 › web中文字和div常用的居中方法（html/css） |
web中文字和div常用的居中方法（html/css）
|
web中文字和div常用的水平垂直居中方法（html/css）
文章目录
web中文字和div常用的水平垂直居中方法（html/css）一、文字的水平垂直居中1.单行文字居中2.多行（一段）文字居中
二、div的水平垂直居中方法一方法二（未知宽高）
一、文字的水平垂直居中
1.单行文字居中
//html
这是一个测试句子
对于单行文本将line-height属性值与height属性值设置一致即可。 代码如下： //css .box1{ width: 500px; height: 100px; font-size: 24px; background-color: blue; text-align: center; /*水平居中*/ line-height: 100px; /*垂直居中 值为heigth的值*/ }效果如下： 对于多行文本居中，组合使用vertical-align:middle;和display:table-cell;实现垂直居中，text-align:center;实现水平居中。 代码如下： //css .box2{ width: 500px; height: 100px; font-size: 24px; background-color: red; vertical-align: middle;/*vertical-align 属性设置元素的垂直对齐方式。*/ display: table-cell; text-align: center;/*水平居中*/ }效果如下： 实现box_bl容器的水平垂直居中 方法一父级box设置positon:relative;（相对定位）；子级box_bl设置 position: absolute;（绝对定位）top、bottom、left、right的值设为0，margin设置为auto。 代码如下： //css .box{ width: 500px; height: 600px; background-color: black; position: relative; } .box .box_bl{ width: 200px; height: 200px; background-color: brown; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }效果如下： 不确定当前div的宽度和高度，父级box设置positon:relative;（相对定位）；子级box_bl设置 position: absolute;（绝对定位）用 transform: translate(-50%,-50%); 代码如下： //css .box{ width: 500px; height: 600px; background-color: black; position: relative; } .box .box_bl{ width: 20%; height: 20%; background-color: brown; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }效果如下： 简单常用的居中方法。 |
【本文地址】
今日新闻 |
推荐新闻 |