csss使用技巧

最新推荐文章于 2024-07-14 12:36:02 发布

鱼还在鱼塘里

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量447

点赞数

分类专栏：日常问题面试文章标签：定位 css html

原文链接：https://www.imooc.com/code/21419

版权

日常问题同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

面试

13 篇文章 0 订阅

订阅专栏

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: black 2px solid;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>我想居中</div>
	</body>
</html>

在这里插入图片描述

水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				margin: auto;
				width: 200px;
				height: 200px;
				border: black 2px solid;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>我想居中</div>
	</body>
</html>

已知宽高实现盒子水平垂直居中

在这里插入图片描述

<body>
		<div class="box">
			<div class="box1"></div>
		</div>
	</body>

要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：

<style>
			.box{
				border: 1px solid #00ee00;
				height:300px;
				position:relative;
			}
			.box1{
				position:absolute;
				top:50%;
				left: 50%;
				margin: -100px 0 0 -100px;
				
				width: 200px;
				height:200px;
				border:1px solid red;
			}
		</style>

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：

在这里插入图片描述

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

面试常考题之宽高不定实现盒子水平垂直居中

未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成。参考下面例子：

<div class="box">
        <div class="box1">
            慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
        </div>
    </div>

样式

.box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;

    }

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

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

鱼还在鱼塘里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
csss使用技巧

水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子
复制链接

扫一扫