css怎么设置div左右对齐

在 css 中设置 div 左右对齐的方法有：1. text-align: center；2. justify-content: center；3. align-items: center；4. grid-template-columns: center。

如何在 CSS 中设置 Div 左右对齐

为了在 CSS 中设置 Div 左右对齐，可以使用以下属性：

1. text-align 属性

text-align 属性可以设置元素中文本的对齐方式。将其设置为 "center" 即可将 Div 中的内容左右居中对齐。

立即学习“前端免费学习笔记（深入）”；

div {   text-align: center; }

2. justify-content 属性

justify-content 属性可以设置 flexbox 容器中子元素的对齐方式。将其设置为 "center" 即可将 Div 中的内容左右居中对齐。

/* 设置 Div 为 flexbox 容器 */ div {   display: flex; }  /* 设置子元素左右居中对齐 */ div > * {   justify-content: center; }

3. align-items 属性

align-items 属性可以设置 flexbox 容器中子元素在交叉轴上的对齐方式。将其设置为 "center" 即可将 Div 中的内容上下居中对齐。

/* 设置 Div 为 flexbox 容器 */ div {   display: flex;   flex-direction: column; }  /* 设置子元素上下居中对齐 */ div > * {   align-items: center; }

4. grid-template-columns 属性

grid-template-columns 属性可以设置网格容器中列的对齐方式。将其设置为 "center" 即可将 Div 中的内容左右居中对齐。

/* 设置 Div 为网格容器 */ div {   display: grid;   grid-template-columns: 1fr auto 1fr; /* 左右对齐中间内容 */ }