CSS如何巧妙实现标题居中、关闭按钮居右效果？

Question

比方说这个，父盒子有左右 padding，中间是标题，右边是关闭按钮。
有不通过定位的方式，巧妙实现么？

Answer 1

我个人一般更多就是用定位的方式。这样比较好适配，或者说是影响主体内容也会比较小。
我不太希望因为一些特殊的限制，去影响到全局的一些布局样式。

<script setup lang="ts">
import TitleBar from './TitleBar.vue';
const handleClose = () => alert('close-click')
</script>

<template>
  <div class="layout">
    <TitleBar title="违法路口TOP5" @close="handleClose" />
    <div class="container">
      这里是主体内容部分
    </div>
  </div>
</template>

<style>
.layout {
  width: 100vw;
  height: 100vh;
  background: #0B2557;
}
.container {
  color: white;
}
html,body {
  margin: 0;
}
</style>

<!-- 标题组件 -->
<template>
  <div class="title-bar" :type="props.type">
    <div class="title-bar-content">
      <div v-if="$slots.title">
        <slot name="title" />
      </div>
      <div class="title-bar-content__text" v-else>{{ props.title }}</div>
      <div class="title-bar-tools">
        <div class="icon icon-close" @click="emits('close')"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits(['close'])
const props = defineProps<{
  title?: string,
  type?: 'fixed' | 'sticky'
}>()
</script>

<style>
.title-bar {
  width: 100%;
  top: 0;
  color: white;
}

.title-bar[type=fixed] {
  position: fixed;
}

.title-bar[type=sticky] {
  position: sticky;
}

.title-bar-content {
  width: fit-content;
  min-width: 150px;
  height: 50px;
  background: linear-gradient(to bottom, #275EA3, #112D63);
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 20px 20px / 0 0 70% 70%;
  box-shadow: 0 0 0 3px #3885CE;
  position: relative;
}

.title-bar-content__text {
  font-size: 20px;
  font-weight: bold;
}

.title-bar-tools {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translate(100%, -50%)
}

.title-bar-tools .icon {
  width: 25px;
  height: 25px;
  color: #3F97F2;
  background: #1C427E;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.icon-close:before {
  content: '';
  width: 60%;
  height: 60%;
  background: linear-gradient(45deg, transparent 45%, white 45%, white 55%, transparent 55%),
              linear-gradient(-45deg, transparent 45%, white 45%, white 55%, transparent 55%);
  display: block;
}
</style>

Vue SFC Playground

Answer 2

两个绝对定位，

文字宽度300，margin-left: -150, left: 50%;
图标 left: 50%; margin-left: 160;

over

Answer 3

1、flex布局,左边flex:1 右边定宽
justify-content: center;align-items: center;
2、grid布局 2列 关闭按钮定宽

display:grid;
grid-template-columns: 1fr 100px;
justify-content: center;
align-items: center;