如何通过CSS居中React内置日历？已实现但始终靠左

问题概述 #

实现React日历后，无论修改CSS样式，日历始终固定在屏幕左侧，调整单个组件样式无效。以下是未添加居中样式前的代码：

原代码 #

CSS 代码 #

/* Base calendar styling */
.react-calendar {
    width: 350px;
    max-width: 100%;
    background: white;
    border: 1px solid #a0a096;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.125em;
}

/* Calendar styling for double views */
.react-calendar--doubleView {
    width: 700px;
}

.react-calendar--doubleView .react-calendar__viewContainer {
    display: flex;
    margin: -0.5em;
}

.react-calendar--doubleView .react-calendar__viewContainer > * {
    width: 50%;
    margin: 0.5em;
}

/* Box sizing for all elements */
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

/* Button styling */
.react-calendar button {
    margin: 0;
    border: 0;
    outline: none;
}

/* Button hover effect */
.react-calendar button:enabled:hover {
    cursor: pointer;
}

/* Navigation bar */
.react-calendar__navigation {
    height: 44px;
    margin-bottom: 1em;
}

.react-calendar__navigation button {
    min-width: 44px;
    background: none;
}

/* Navigation button hover and disabled styles */
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
    background-color: #e6e6e6;
}

.react-calendar__navigation button[disabled] {
    background-color: #f0f0f0;
}

/* Weekday labels in month view */
.react-calendar__month-view__weekdays {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.75em;
}

.react-calendar__month-view__weekdays__weekday {
    padding: 0.5em;
}

/* Week numbers in month view */
.react-calendar__month-view__weekNumbers {
    font-weight: bold;

}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
}

/* Weekend day styling */
.react-calendar__month-view__days__day--weekend {
    color: #d10000;
}

/* Neighboring month day styling */
.react-calendar__month-view__days__day--neighboringMonth {
    color: #757575;
}

/* Year, decade, and century view tile padding */
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
    padding: 2em 0.5em;

}

/* Calendar tile styling */
.react-calendar__tile {
    max-width: 100%;
    text-align: center;
    padding: 0.75em 0.5em;
    background: none;
}

/* Disabled tile styling */
.react-calendar__tile:disabled {
    background-color: #f0f0f0;
}

/* Enabled tile hover and focus styles */
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
    background-color: #e6e6e6;
}

/* Current date tile styling */
.react-calendar__tile--now {
    background: #ffff76;
}

.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
    background: #ffffa9;
}

/* Active date tile styling */
.react-calendar__tile--hasActive {
    background: #76baff;
}

.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
    background: #a9d4ff;
}

/* Active tile styling */
.react-calendar__tile--active {
    background: #006edc;
    color: white;
}

.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
    background: #1087ff;
}

/* Select range mode tile hover style */
.react-calendar--selectRange .react-calendar__tile--hover {
    background-color: #e6e6e6;

}

JSX 代码 #

import { useState } from 'react';
import Calendar from 'react-calendar';

export default function CalendarComponent(){
    const[date, setDate] = useState(new Date())

    return(
      <div className="calendar">
          <h2>Job Estimator and Scheduler</h2> 
          <div className="calendar-container">
              <Calendar onChange={setDate} value={date}/>
          </div>
          <div className="text-center">
              Selected date: {date.toDateString()}
          </div>
      </div>
    );
}

解决方法 #

问题核心是日历的父容器未设置居中布局，.react-calendar作为块级元素默认左对齐，以下两种方法可快速解决：

方法1：给父容器.calendar-container添加居中样式 #

在CSS中加入：

.calendar-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

或者使用传统margin居中：

.calendar-container {
  width: fit-content;
  margin: 0 auto;
}

方法2：直接给.react-calendar添加居中属性 #

如果父容器样式未生效，可直接修改日历自身样式：

.react-calendar {
  /* 保留原有样式 */
  width: 350px;
  max-width: 100%;
  background: white;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;
  /* 添加居中 */
  margin: 0 auto;
}

额外注意 #

• 检查全局样式（如body或上层容器的float、position属性）是否冲突，避免覆盖居中设置。
• 你的JSX中存在拼写错误：<Calender .../>应改为<Calendar .../>，虽不影响居中，但可能引发组件渲染问题。

内容的提问来源于stack exchange，提问作者nBenton2000